一.自适应(头部)
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
1.width=device-width 表示宽度是设备屏幕的宽度
2.initial-scale=1.0 表示初始的缩放比例
3.minimum-scale=1.0 表示最小的缩放比例
4.maximum-scale=1.0 表示最大的缩放比例
5.user-scalable=no 表示用户是否可以调整缩放比例
不加meta标签的话，假如把一个980px宽度的(手机端常规是980)pc网页放在手机上显示，也能正常显示不出现滚动条，但是字体等都相应缩小了
二.新增加标签
article、aside等
头部、底部等可以直接用article标签包裹起来
一些移动设备（如 ipad），在解析 html5 标签时，遇到 aside 标签可能会有个性化的展示，可能效果更美观。(?)
article标签表示页面中一块与上下文不相关的独立内容，aside标签表示article元素的内容之外的，和内容相关的辅助信息
三.百分比布局
1.宽度用百分比不要直接用具体的数字
2.如果有padding-left/padding-right或border，导致横向滚动条出现怎么办
- box-sizing:border-box;
- -webkit-box-sizing:border-box;
3.手机端其屏幕像素密度比较高，实际写代码时，一切高度、字号、边距都要减半
如引入背景图实际大小为320px*260px，应写上样式background-size:160px 130px;或者 160px;height:130px;
如果是img标签引入的图片，则<img width="160" height="130" ...../>