移動端自適應與rem

2021-08-18 13:24:17 字數 782 閱讀 4152

提到移動端適配,小夥伴們都會想到rem布局,那麼rem是什麼呢?我們有為什麼要使用rem呢?下面我們就來討論一下。

rem是相對於根元素(也就是說到rem又不免想到em。那麼他們之間有什麼血緣關係嗎?是的,他們可能是兄弟、父子,也可能是爺孫關係。它們之間的區別在於,rem依賴於根元素,而em是依賴於父元素。

為什麼要在移動端使用rem呢?pc端就不行嗎?答案當然是肯定的,但由於某些瀏覽器(如ie瀏覽器)對rem的相容性,盡量還是不要在pc端使用rem。

最普遍的用法莫過於根據設計圖的寬度來設定:

document.queryselector('html').style.fontsize =

document.queryselector('html').clientwidth / 750* 100 + 'px';

window.onresize = function ()

這樣就把html的fontsize設定為整屏寬度的十二分之一,也就是說整屏寬度等於12rem,平常用百分比做不到的效果我們就可以輕鬆搞定。如:把螢幕分成3等份。

再比如下面這種情況:

我們想要img的寬高比例固定,用百分比顯然是做不到的。我們能要求使用者上傳的時候把的比例固定嗎?顯然不現實。這個時候用rem來設定它的寬高就可以輕而易舉的解決這個問題了。

移動端自適應rem布局

補充乙個基本知識,不許笑,1rem等於html中設定的字型大小 px 首先,html 的 head 部分中加入如下 initial scale 初始縮放比例,即當瀏覽器第一次載入頁面時的縮放比例。值為 1.0 即原始尺寸。maximum scale 允許瀏覽者縮放到的最大比例,一般設為1.0,即原始...

移動端自適應rem大小

自執行函式封裝 以iphone5的根字型大小為20px螢幕邏輯畫素為320,可以改變 字串名字 in window 判斷window下有沒有這個字串方法屬性,返回布林值 orientationchange 螢幕方向改變時候觸發的函式 resize螢幕尺寸發生改變時候觸發的函式 function do...

rem自適應布局 移動端自適應必備

由於移動端特殊性,本文講的是如何使用rem 實現自適應 或叫rem 響應式布局,通過使用乙個指令碼就可以rem自適應 rem是相對於根元素 這樣就意味著,我們只需要在根元素確定乙個px字型大小,則可以來算出元素的寬高。1rem 16px 瀏覽器html的畫素,可以設定這個基準值 假如瀏覽器的html...