rem 這個單位對於前端來說並不陌生了,在移動端適配方面,我們經常會用到它,通常我們會採用類似**flexible.js 的方案, 寫px,然後通過外掛程式轉化成rem,然後得出一堆小數值的rem單位.**這個方案已經用了很多年,相容性很好,然而現在已經2023年了,許多相容性問題現在不再那麼頭疼了,因此我們現在有了更好的適配方案.
在很早以前,vw 這個單位就已經被列入w3c規範了,如果基本都支援了,vw 表示螢幕的1%,可能有人會問到那跟百分比有什麼區別呢? 通常,很多情況確實可以被百分比替代,但是要知道百分比如果要子n代元素都生效,那得所有父級元素都得相對html,body 100%寬才能有作用,而vw則永遠相對 螢幕1%.說了vw的含義來說說怎麼結合rem適配吧.
這裡直接給出結果,只需一行**即可
html效果如上圖所示,注意:應設定meta為移動端
移動端布局2 vw結合rem實現移動端布局
media all and max width 320px media all and min width 321px and max width 375px media all and min width 376px 1 例如設計圖為750px 設計圖量出height為88px 2 考慮dpr為2...
移動端vw單位適配
一.專案中配置postcssrc.js，同時安裝好對應的外掛程式 module.exports 解決 import引入路徑問題 postcss url 該外掛程式主要用來處理檔案，比如檔案 字型檔案等引用路徑的處理.autoprefixer 自動處理瀏覽器字首，不用在乙個個加字首啦 postcss ...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...