rem的正確使用姿勢 -- 完美解決H5頁面不同尺寸螢幕的適配問題
阿新 • • 發佈：2018-11-10
例項程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>廢土坱行</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> * { margin: 0; padding: 0; } .downloadBtn { width: 12rem; height: 3.6rem; background: red; position: absolute; left: 50%; top: 29.6rem; margin-left: -6rem; font-size: 1rem; } </style> </head> <body> <div class="content"> <img class="contentImg" id="contentImg" src="./images/content.png"/> <button class="downloadBtn">立即下載</button> </div> <script> function initWidth() { document.getElementById("contentImg").style.width = document.documentElement.clientWidth + 'px' } function initFontSize() { const cw = document.documentElement.clientWidth // width: 375px -> fontSize:16px if (cw == 375) { document.documentElement.style.fontSize = '16px' } else { document.documentElement.style.fontSize = cw / 375 * 16 + 'px' } } initWidth() initFontSize() window.onresize = () => { initWidth() initFontSize() } </script> </body> </html>
思路簡介：
1、首先，介面佈局的尺寸採用rem單位。
2、然後，通過設定根節點（html）的 font-size 的 px 值 來影響 rem 的實際大小。
3、最後，通過 js 來實時控制font-size 的大小，等比例變換即可。
效果演示：
標準尺寸下（iphone6）：
其它裝置上（比如iphone5）：
注：可以看到我這個“立即下載”的按鈕位置基本上是可以和img對上的。