1.设置viewport
移动端一般会有布局视口(layout viewport),可视视口( visual viewport),理想视口(idea viewport),一般手机为了能够显示网页,会将布局视口设置为980px以上;可视视口就是浏览器的窗口大小;理想视口呢,就是不需要缩放就能查看网页的宽度,一般移动端都是采用理想视口,为了实现理想视口,我们会在head当中写这样一段代码:
<meta name="viewport" content="width=device-width,initial-scale=1">
2.单位的选择
1.px
2.em
3.rem
px就不说了,说一下em和rem,em呢是相对单位,参照物是设置了font-size的父元素的font-size.如果父元素为12px,子元素的font-size为2em,那么子元素的font-size就为24px.当父元素没有设置font-size时,子元素就会一直向上查找设置了font-size的祖先元素,一直到html,如果都没有设置,那么浏览器默认1em=16px.
rem可以理解为root-em,rem的参照物为根元素html,如果给html设置了font-size为10px,那么1rem即为10px.当html没有设置font-size时,浏览器默认1rem=16px.
在移动端,我们最好采用rem单位来设置font-size和margin,padding,这样我们以后只需要采用@media查询来更改html的font-size就能适配不同的页面.
3.盒子宽高的设置
一般块状元素宽度都设置为百分比,这样不同分辨率大小网页内容可以自适应.
4.图片自适应
<picture>
<source srcset="imgs/ad001-l.png" media="(min-width:50em)">
<source srcset="imgs/ad001-m.png" media="(min-width:30em)">
<img src="imgs/ad001.png" alt="2015年度报告">
</picture>
因为浏览器支持性较差,这里采用picturefill.js插件来模拟picture标签,picture标签的意义是遍历source,然后采用符合media查询的img.