读高性能响应式web开发实战有感

1.css像素（px）是一种抽象像素，又被称为与设备无关像素。不同于设备的机械的、物理的像素。

2.让浏览器自适应系统分辨率宽度的html代码：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

3.系统分辨率指的是视口大小。

4.导航栏基础样式：

.nav-list-item{

float:left;

width:25%;

width:calc(100%/4);

}

我们用css3的calc函数，可以避免手动去计算每个导航栏宽度的问题，但是原始的width：25%与width：calc(100%/4);应同时存在，因为老版本的浏览器不支持calc函数。

5.要有渐进增强和优雅降级的意识。

先看到这里，以后再补充剩下的章节

6.首先看一段html代码

<nav>

<ul>

<li><a>文字1<a><li>

<li><a>文字2<a><li>

<li><a>文字3<a><li>

<ul>

<nav>

让文字垂直居中的方法：

nav{

height:30px;

line-height:30px;

}

但是这样会有一个问题，height属性和line-height属性可能在不同 的样式片段中。

解决办法：

li a {

display:block;

padding:20px 40px;

}

先设置为块级元素才能使边距生效

第四章：媒体查询

看一段媒体查询代码

@media only screen and (max-width:600px){

.sidebar{display:none;}

}

代码的含义：

当页面仅在屏幕上显示，且页面宽度不超过600px时，让侧边栏隐藏。