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:每种颜色的位数
当然还包括一些其他的参数