移动web开发与适配

学习目标

• 了解移动web简单调试方法
• 了解移动web常见适配方案
• 掌握移动端布局技巧
• 全面掌握rem适配方法

移动端小知识

1. 跑在手机端的web页面(H5页面)

   为什么也叫做H5页面？

   因为手机端的浏览器都相对比较新，对H5的支持比较完整，所以手机端的web页面也叫H5页面。

2. 跨平台(android,ios,pc)

3. 基于webview

   手机终端在引入H5页面时都是通过webview组件实现的

4. 告别IE拥抱webkit

   手机端的浏览器大多数都是使用webkit内核，所以只需要适配webkit内核的浏览器就可以了

5. 更高的适配和性能要求

pc端与移动端开发的差别

pc端	移动端
960px / 1000px 居中	定高 / 宽度百分比
盒子模型 (定高/定宽)	flex布局
display ： inline-block	media @query (媒体查询)

媒体查询语法

@media 媒体类型 and (媒体特性){
    /*css代码*/
}

媒体类型如： screen 、print ...            媒体特性如： max-width 、 max-height

rem原理及简介

1. 单位：rem是以html的font-size属性为参考物设置元素的字体尺寸
2. 适配原理：是将px转换为rem，通过修改html的font-size实现适配
3. 兼容性：兼容ios6+ 及 android2.1+

修改html的font-size属性的方式

1. 媒体查询

   ​

2. js

移动web适配的方式

总结：

适配移动端web页面的方式有3种。

1. 百分比(或弹性布局display:flex)
2. 媒体查询
3. rem

rem进阶

1. rem基准值的计算

   rem的基准值就是html的font-size的值

2. rem数值计算与构建

   使用px值 除以 rem基准值就可以得到 rem数值

   如： (320px / 16px) + rem = 20rem

3. rem与sass集合使用

   /*安装编译.scss文件的包：npm install node-sass*/
   @function px2rem($px){
       $rem : 37.5px;   /*iphone6的 375px / 10 （html的font-size作为基准值）*/   
       return ($px / $rem) + rem;
   }
   

4. rem适配实战