响应式web布局笔记(1)

1.重置样式的css，用来覆盖不同浏览器渲染html元素时的各种默认样式。这里采用了mayer的reset.css样式，地址如下：reset.css。当然还有其他的重置样式可以使用，可以根据需求和自己的喜好进行定制。

2.viewport参数。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

viewport参数指定了支持该参数的浏览器对页面大小的缩放，content的参数还包括maximum-scale、minimum-scale、user-scalable参数分别表示最大可缩放大小、最小可缩放大小和是否禁止缩放。

鉴于viewport标签使用的越来越普遍，w3c正尝试通过css引入同样的功能，可查询@viewport获取更多的信息。

3.媒体查询语法。

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

}

@media not screen and (oritation: portrait) and (min-width:480px){

}

常用的查询属性包括：

width:视口宽度

height:视口高度

device-width:设备屏幕的宽度

device-height:设备屏幕的高度

orientation:设备处于横向还是纵向

aspect-ratio:基于视口宽度和高度的宽高比

device-aspect-ratio:屏幕的宽高比

color:每种颜色的位数

当然还包括一些其他的参数