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； 若有什么問題，可以指出來，指導指導我，互相學習哈哈哈！

?

轉載于:https://www.cnblogs.com/ycgo/p/10364441.html

總結

以上是生活随笔為你收集整理的移动端web自适应适配布局解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。