学习目标
- 了解移动web简单调试方法
- 了解移动web常见适配方案
- 掌握移动端布局技巧
- 全面掌握rem适配方法
移动端小知识
-
跑在手机端的web页面(H5页面)
为什么也叫做H5页面？
因为手机端的浏览器都相对比较新，对H5的支持比较完整，所以手机端的web页面也叫H5页面。
跨平台(android,ios,pc)
-
基于webview
手机终端在引入H5页面时都是通过webview组件实现的
-
告别IE拥抱webkit
手机端的浏览器大多数都是使用webkit内核，所以只需要适配webkit内核的浏览器就可以了
更高的适配和性能要求
pc端与移动端开发的差别
| pc端 | 移动端 |
|---|---|
| 960px / 1000px 居中 | 定高 / 宽度百分比 |
| 盒子模型 (定高/定宽) | flex布局 |
| display ： inline-block | media @query (媒体查询) |
媒体查询语法
@media 媒体类型 and (媒体特性){
/*css代码*/
}
媒体类型如： screen 、print ... 媒体特性如： max-width 、 max-height
rem原理及简介
- 单位：
rem是以html的font-size属性为参考物设置元素的字体尺寸 - 适配原理：是将
px转换为rem，通过修改html的font-size实现适配 - 兼容性：兼容
ios6+及android2.1+
修改html的font-size属性的方式
-
媒体查询
-
js
移动web适配的方式
总结：
适配移动端web页面的方式有3种。
- 百分比(或弹性布局display:flex)
- 媒体查询
- rem
rem进阶
-
rem基准值的计算
rem的基准值就是
html的font-size的值 -
rem数值计算与构建
使用px值 除以 rem基准值就可以得到 rem数值
如： (320px / 16px) + rem = 20rem
-
rem与sass集合使用
/*安装编译.scss文件的包：npm install node-sass*/ @function px2rem($px){ $rem : 37.5px; /*iphone6的 375px / 10 （html的font-size作为基准值）*/ return ($px / $rem) + rem; } rem适配实战
