手機端 自適應頁面rem

2021-10-06 20:28:50 字數 1043 閱讀 9995

一、手機端自適應rem

(1)樣式重置、定義字型大小

/*樣式重置這塊省略,大同小異*/

/*定義字型大小*/

@media screen and (

min-width

:320px)

body

}@media screen and (

min-width

:360px)

body

}@media screen and (

min-width

:375px)

body

}@media screen and (

min-width

:384px)

body

}@media screen and (

min-width

:400px)

body

}@media screen and (

min-width

:414px)

body

}@media screen and (

min-width

:424px)

body

}@media screen and (

min-width

:480px)

body

}@media screen and (

min-width

:540px)

body

}@media screen and (

min-width

:720px)

body

}@media screen and (

min-width

:750px)

body

}

(2)html頁面裡面寫上以下meta

"viewport" content=

"width=750,user-scalable=no"

/>

(3)這裡的750rem寬就是100%寬

手機端頁面rem自適應指令碼

在我看來,rem就是1rem單位就等於html節點fontsize的畫素值。所以改變html節點的fontsize是最為關鍵的一步。根據手機寬度改變相對大小就可以實現自適應了,就不用什麼 查詢那些的。我們的設計圖往往寬度是640或者其他尺寸的,不過我建議是用這個尺寸,以640為基準,以小到大,實現自...

手機端頁面自適應解決方案 rem布局

只需在頁面引入這段原生js 就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recal...

手機端頁面自適應解決方案 rem布局

相信很多剛開始寫移動端頁面的同學都要面對頁面自適應的問題,當然解決方案很多,比如 百分比布局,彈性布局flex 什麼是flex 也都能獲得不錯的效果,這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案 rem 什麼是rem 布局 rem布局非常簡單,首頁你只需在頁面引入這段原生js 就可以了 f...