02_移动端适配

meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

移动端适配

rem适配

>rem单位：
	根标签的font-size所代表的值
>步骤
    1.创建style节点
    2.获取视觉视口宽度/16（避免 出现小数丢失精度），
    	当width=device-width时，用布局视口宽度代替，无兼容性问题
    3.style节点中设置html的font-size，并且声明!important
    4.将style节点添加到head标签内
>原理
  改变一个元素在不同设备上的css像素的个数
>优缺点
  优点：可以使用完美视口
  缺点：px到rem的转化特别麻烦

<script type="text/javascript">
(function(){
    var styleNode = document.createElement('style')
    var wid = document.documentElement.clientWidth/16
    styleNode.innerHTML = 'html{font-size: ' + wid + 'px!important;}'
    document.head.appendChild(styleNode)
})()
</script>

viewport适配

>步骤
    将所有设备的布局视口的宽置为设计图的宽度
    创建meta标签
        <meta name="viewport" content="width=device-width" />
    第一步 定义设计图的宽度
    第二步 确定系统缩放比例
    第三步 选中viewport标签，改变其content值

>原理
    改变不同设备上一个css像素跟物理像素的比例
    
>优缺点
    优点：所量即所得
    缺点：破坏了完美视口


<meta name="viewport" content="width=device-width"/>

<script type="text/javascript">
(function(){
    var targetW = 640;
    var scale = document.documentElement.clientWidth/targetW;
    var meta = document.querySelector("meta[name='viewport']");
    meta.content="initial-scale="+scale+",minimum-scale="+scale
    +",maximum-scale="+scale+",user-scalable=no";
})()
</script>

百分比适配

百分比参照于谁

流体(弹性布局 flex)+固定 (不是适配)