移動端rem使用

標籤：fun   round   ant   比例   doc   通過   phone   nbsp   設計   

<!--rem CSS3新增的一個相對單位，相對於根節點(html)字型大小的值 roothtml{font-size:10px}    2rem=20px通過它就可以做到只修改根項目的大小，就能成比例地調整所有的字型大小，只依賴html字型的大小-->

第一種方式：多解析度設定rem設定　（不同的解析度不同的大小，例如iPhone6中，1rem=23px）

/*Note3*/@media only screen and (min-width:360px){    html{font-size:22px!important;}}/*iPhone6*/@media only screen and (min-width:376px){    html{font-size:23px!important;}}/*iPhone6 plus*/@media only screen and (min-width:414px){    html{font-size:25px!important;}}/*big Resolution*/@media only screen and (min-width:641px){    html{font-size:25px!important;}}

 

第二種方式：js實現，比如你的設計圖是1080px的，那麼你用1080/18=60px,1rem=60px

<!--rem布局1、必需動態去設定html的大小，才能適配2、根據頁面(注意：是psd圖，也就是真實大小大)的寬度除以一個係數，把算出的這個值賦給html的font-size屬性1、為什麼要除一個數字，原因是：一個頁面裡，不可能全都是整屏的元素，肯定有一行中放多個元素。所以就把一行分成n份2、不除一個數位話，那1個rem就是螢幕的寬度，這個值太大，如果一個元素的寬度比它小的話，就不方便計算3、這個係數，自己定。多少都可以，但是建議給一個能整除的值特點：1、所有有單位的屬性會根據螢幕的尺寸自動計算大小2、同樣一個元素，在不同的裝置下的大小是不一樣的。在尺寸小的裝置下顯示的小，在尺寸大的裝置下顯示的大3、一般以iphone6為基準，以它的寬度750除上一個係數，再去算rem-->

<script>            (function(){                var html=document.documentElement;                var width=html.getBoundingClientRect().width;//擷取視窗大小                                html.style.fontSize=width/18+‘px‘;                                // 設計圖是1080px的 1rem=60            })();</script>

 

 

 

 

移動端rem使用