移動web開發小記

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';
})