移动端前端开发

一.自适应(头部)

<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" ...../>