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)+固定 (不是適配)