html代碼中最關鍵的就是meta标簽設定,開發移動端頁面首先一定要設定viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
不同機型适配可以使用rem機關來解決
可以通過VW機關來适配rem
html {background-color: #eee; font-size: 13.33333vw;}
通過js動态擷取螢幕的寬度,進而計算出html的font-size,還是拿日常開發常見的750px的設計稿為例:
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDOM = document.getElementsByTagName('html')[0];
htmlDOM.style.fontSize = htmlWidth / 7.5 + 'px';
window.addEventListener('resize', (e) => {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
htmlDOM.style.fontSize = htmlWidth / 7.5 + 'px';
})