如何利用rem做響應式布局

2021-08-31 10:03:15 字數 600 閱讀 7268

第一步:由於一些解析度不同等的一些原因,要做到能夠適配,開始要加這個一句話

詳情的參考:

第二步:在css中寫這麼一些clss類,實現根據螢幕的大小設定字型大小,為什麼設定字型,由於rem這個計算單位需要參考html的font-size值來進行計算,由於計算得到的結果不同,大小也自然不同!

html 

@media(max-width:540px) } /*android常用寬度*/

@media(max-width:480px) } /*android常用寬度*/

@media(max-width:414px) } /*i6plus,i7plus寬度*/

@media(max-width:375px) } /*i6,i7寬度*/

@media(max-width:360px) } /*android常用寬度*/

@media(max-width:320px) }

第三部:

計算公式=實際的px畫素/當前的螢幕font-size值

得到的數字就是rem值,再賦值給原來的元素。

這樣就實現了 適配的效果!

rem響應式布局

監聽瀏覽器,針對不同解析度計算font size function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentlo...

REM響應式布局

因為能相容,手機 平板 pc終端既省錢又省力 有很多 的解決辦法是,為不同的裝置提供不同的mobile版本,或者iphone ipad版本。這樣效果 但是比較麻煩,同時要維護好幾個版本 於是,一次設計,普遍適用 根據螢幕寬度,自動調整布局 layout 第一步 meta vp標籤 meta name...

資料大屏響應式布局rem

資料大屏響應式布局,主要用到rem,涉及乙個rem.js檔案,需要安裝乙個依賴 postcss px2rem 此外還用到vw vh 百分比相對單位來設定布局寬度。1 什麼是rem?摘自菜鳥教程 rem是css3新增的乙個相對單位 root em,根em 這個單位與em有什麼區別呢?區別在於使用rem...