移動端web自適應適配佈局解決方案

丶真小白發表於2019-02-12
Web

100%還原設計圖，要注意： 

看佈局，分析結構。

 

感覺難點在於：
1.測量精度（ps測量資料）；
2.文字的行高。

 

前段時間寫個移動端適配的頁面（剛接觸這方面），查了一些資料，用以下方法能實現：

1.設定理想視口：
自動適應螢幕寬度 ：網頁的寬度預設等於螢幕的寬度
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
2.動態設定fontSize：
function resize() {
    let width = window.screen.width;
    const basicvalue = 1024; //設計稿上的解析度大小
    
    //放大100倍，為了方便計算rem大小
    document.documentElement.style.fontSize = (width / basicvalue) * 100 + `px`;
}

//加上以下程式碼是為了切換裝置時能時刻重新整理動態fontSize，從而得到正確的佈局
window.addEventListener(`resize`, function () {
    resize();
});
window.addEventListener(`DOMContentLoaded`, function () {
   resize();
});

 

3.還需要css樣式中用@media設定fontSize：
需要額外的媒介查詢
html{
   font-size: 100px;
}

@media only screen and (min-device-width:320px) and (max-device-height:568px){
   html{
      font-size: 42.6667px;
   }
}
@media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){
   html{
      font-size: 50px;
   }
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){
   html{
      font-size: 55.2px;
   }
}
 
之後佈局的寬高及邊距等都可以用rem來佈局了，即100px = 1rem；
 
若有什麼問題，可以指出來，指導指導我，互相學習哈哈哈！

 

相關文章