用rem實現響應式頁面開發

2021-09-23 19:50:11 字數 1081 閱讀 1145

rem(font size of the root element)是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對于父元素的字型大小的單位。它們之間其實很相似,只不過乙個計算的規則是依賴根元素乙個是依賴父元素計算。

網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。

html

.btn

上面**結果按鈕大小如下圖:

小學妹我的任務

enson 完成了乙個關於清華大學的任務

enson 完成了乙個關於清華大學的任務

去幫忙

以上是頁面布局和js動態計算html  font-size小心的**,頁面元素大小都用rem單位進行設定,當然有的元素寬度可以用百分比進行設定,大家可以參照demo進行學習。

2017-09-28 更新

*上面所寫的方法中,根據手機螢幕的寬度用js動態給html賦值font-size的方法可以用 font-size:62.5%;和@media進行替代。能夠達到同樣的效果,同時也減少了**量。如下:

@media 

only

screen and (min-width: 320

px)

}@media

only

screen and (min-width: 375

px)

}@media

only

screen and (min-width: 414

px)

}

通過@media **查詢屬性來動態給html賦值。效果如下

用rem來做響應式開發

demo 由於這個專案我設定了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的解析度或者通過手機訪問看看效果。基本上在不同解析度下都是差不多的展示效果,而且在手機移動終端下都是100 的撐開。這種響應式的效果,我想應該是最符合現在移動終端多樣化的需求的,如果只是做幾個特別適應的...

用rem來做響應式開發

demo 由於這個專案我設定了最大的寬度限制是640px,最小限制是320px,大家可以改變瀏覽器的解析度或者通過手機訪問看看效果。基本上在不同解析度下都是差不多的展示效果,而且在手機移動終端下都是100 的撐開。這種響應式的效果,我想應該是最符合現在移動終端多樣化的需求的,如果只是做幾個特別適應的...

JS 用rem來做響應式開發

電腦版的 昨晚做完了,今天趕著做手機端的,提到手機端的 第乙個想到的就是要 適應不同手機螢幕的寬度,保證在不同手機上都能正常顯示給使用者,我之前做這類 都是無腦引進bootstrap的。但前乙個專案做完之後我發現bootstrap雖好,但裡面的各種樣式我利用的很少,最多用到它排版,當 最後上傳的時候...