移动web开发适配

移动开发的概念

• 跑在手机端的web页面（h5页面）
• 跨平台
• 基于webview
• 告别IE，拥抱webkeit
• 更高的适配（IOS & 安卓）和性能要求

常见问题

• PC端
  容器居中，盒子模型定高定宽，display：inline-block

• 移动web
  定高，宽度百分比，flex，Media Query媒体查询

---

Media Query(媒体查询)

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

媒体类型：screen ,print .....        媒体特性： max-width , max-height....
可以通过 link标签引入 

rem适配原理

1. rem 是 font size od the root element
2. 字体单位：值根据HTML根元素大小而定，同样可以作为宽度、高度等单位
3. 适配原理：将PX转换成rem,动态修改html的font-size进行适配
4. 兼容性：IOS6 以及 android2.1都兼容

1. 1rem = html(font-size)
2. 通过js动态控制html 的 font-size  

    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //获取视窗宽度
    let htmlDom = document.getElementByTagName('html')[0];    //获取视窗高度 
    htmlDom.style.fontsize = htmlWidth  / 10 + 'px'; 

3.rem结合 sass一起运用
   sass 可以通过命令 node直接下载 npm install sass
   sass 的 function 编译计算rem的方法，代码如下： 
    function px2rem($px){
         $rem:37.5px;
         $return: ($px / $rem ) + rem
     }
     //css调用函数
     .hello{
        width:px2rem(100px);
        height:px2rem(100px);
     }
     //编译以后的结果如下：
     .hello{
        width:px2rem(2.66667rem);
        height:px2rem(2.66667rem);
     }