關於移動端css用rem單位的情況

2021-07-08 13:54:32 字數 473 閱讀 2298

寫移動端的頁面有一些了

試用過的方法大概總結一下:

1、字型大小單位px,寬度寫百分數,高度寫定值px

2、在css中用@media寫**查詢,以iphone6 為分界,字型大小單位用rem,寬度寫百分數,高度盡量用padding,不要給定值(防止使用者在瀏覽器中自動調節字型大小大小,使頁面錯亂)

3、就是本文想說的重點方法,用js算一下基本字型大小的大小,字型大小,寬度和高度,所有單位都用rem換算。(假如,你想做乙個以下的類似這樣的手機活動頁,花圈部位為可替換)

寫法(如果設計圖是640尺寸的,當js中設定除以6.4,那css中,如果字型大小在設計圖中是24px,那麼css就寫成0.24rem除以100就ok了,如果寬度是100px;那就寫width:1rem;):

如果不想讓隨螢幕大小無線放大,還可以給乙個限制如下

移動端 單位 rem

rem是指相對於根元素的字型大小的單位 相對單位 rem和em的區別,em相對于父元素的字型大小的單位。rem相對於根元素html字型大小計算,px是乙個絕對的單位。所以rem可以實現強大的螢幕適配布局 例如 html btn 那麼.btn的寬度為120px 高度為60px 所以在做移動端適配的時候...

移動端適配rem單位

1.rem單位 描述 rem是css中的乙個尺寸單位,和px,em等單位一樣,都是用來設定大小的。rem代表的含義為 是html的字型大小的多少倍 語法 document.documentelement.style.fontsize document.documentelement.clientwi...

移動端rem距離單位的使用

在做移動端開發的時候大家肯定會遇到適配問題,手機的螢幕大小有非常多的類別,使用傳統的px距離單位已經無法滿足我們的需要,於是rem便橫空出世,他與百分比定位是比較像的,但是也是有一定的區別,在這裡就跟大家分享一下rem的使用方法。rem是乙個相對單位,他的大小是可以根據你的計算來定的,比如說在我的移...