手機端 自適應頁面rem

一、手機端自適應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
}

"viewport" content=

"width=750,user-scalable=no"
/>

手機端頁面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...