移動web開發之rem的使用

標籤：調整   web   width   移動web   span   如何   設計師   resize   cti   

為什麼要使用rem

　　移動端裝置尺寸五花八門，單純使用px這個單位無法輕易適配，rem就可以為我們解決這個問題！

如何使用rem

　　1rem預設等於16px，這是因為頁面的預設字型大小就是16px。r 代表rootelement,因此只要修改html的font-size大小，就可以更改1rem的大小！

叮囑UI設計師

　　移動端的設計稿尺寸要做成640*750的！移動端的設計稿尺寸要做成640*750的！移動端的設計稿尺寸要做成640*750的！重要的事情說三遍！（640固定，高度可變）

當拿到圖後

　　一般人會人為將設計圖按寬度方向分為若干份（不固定，好算即可），例如640寬的設計稿，分為20份，640/20 = 32,則32就作為設計稿中rem的單位，1rem就等於32px ，則在設計稿中量到一個寬度為100px的元素，實際項目就是 100/32 rem（就是將設計圖中測量出來的尺寸轉化為rem的值）

　　因此，在不同的裝置中我們只需要去動態設定html的font-size = 裝置寬度 / 20 （20是剛剛你分的份數）

　　以下代碼直接在頁面中寫，而且要寫在頁面頂部，js要在頁面開啟時立刻執行！

　　<script type="text/javascript">
    　　// 根據螢幕的寬度 來設定 html的 font-size
    　　// 計算 font-size
    　　var fontSize = window.screen.availWidth / 20;
    　　document.querySelector(‘html‘).style.fontSize = fontSize + ‘px‘;
　　　　 //瀏覽器視窗被調整時執行
    　　window.onresize = function () {
       　　 // 計算 font-size
        　　var fontSize = window.screen.availWidth / 20;
        　　document.querySelector(‘html‘).style.fontSize = fontSize + ‘px‘;
    　　}
　　</script>

 

移動web開發之rem的使用