[html] 移動端布局的自適應如何做？

移動端的布局，如果是采用框架的話，小程序和uni-app等都有響應式單位rpx來做自適應。 如果單純的用Vue或React的話，一般來說就是flex配合rem或者vw布局來實現自適應。 rem布局的原理是根據rem是相對于根字體大小而改變的， 例如設計稿是750px大小的，可以設置一個轉換比例來做適配：const width = document.document.documentElement.clientWidth // 獲取當前屏幕的寬度，例如蘋果6是375 const designWidth = 750 // 設計稿的寬度 // 下面計算比例，我們以1:100來計算（因為整除100好算，當然可以通過vscode插件）： const ratio = 375 / 750 * 100 // 就用這個來設置為根字體大小 document.querySelector('html').style.fontSize = ratio + 'px' document.querySelector('body').style.fontSize = '16px' // 因為設置了跟字體大小，會影響到其他的樣式，所以要通過body還原 這樣假如設計稿的一個`div`是100px，我們可以處以比例（100），即`1rem`。 div { width: 1rem; } // 所以在375px里面就是50px的寬度。vw的話，是100vw即可以鋪滿整個屏幕，這個相對于rem更加簡單，只是可能兼容性不如rem布局，實現：// 假設設計稿是750px const ratio = 750/100 = 7.5; // 除以100是因為屏幕寬度恒定為100vw //假設一個`div`是`375px`大小 div { width: 3.75vw; } // 3.75vw在375px的屏幕下就是一般，即187.5px

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[html] 移动端布局的自适应如何做？的全部內容，希望文章能夠幫你解決所遇到的問題。

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