Rem是如何實現自適應布局的?

2021-08-14 14:11:01 字數 957 閱讀 8403

作為前端工程師的我們,在h5頁面布局的過程中會使用rem布局,大家都知道rem是相對長度單位,但是作為前端的我們該如何去讓rem布局自適應iphone4、iphone6、iphone6、iphone6plus的呢?

那我們都看到天貓在手機網頁端中,是根據手機大小的不一樣去自適應的,那麼我們接下來讓我們自己的h5網頁的頁面自適應手機裝置

一、首先我們先看一下擁有幾億使用者的**天貓是怎麼做的呢?

我們看到整個頁面中改變了根元素html中的屬性font-size的大小,就做到讓按鈕中字型的大小發生變化。

二、使用在自己的專案中

我們使用rem在頁面中做乙個按鈕:

確定

接著有兩種方案

① 我們可以想**一樣,通過使用js去控制根元素中html的font-size的大小,進而改變按鈕的大小。

② 也可以使用自己的知識點,使用css**查詢去設定頁面中根元素的font-size屬性。

我這裡就介紹使用css**查詢設定font-size的屬性,

最後我們可以去谷歌中去測試,結果如下圖

這就是我對rem自適應布局的研究和理解的總結,希望對大家有幫助,我會持續進步更新我的知識庫,嘻嘻*_*

rem是如何實現自適應布局的?

移動前端開發 rem 133821view0 文章目錄 摘要 rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個px字型大小,則可以來算出元素的寬高。本文講的是如何使用rem實現自適應。rem是什麼?rem font size of the root element 是指相對於根元素的字...

rem是如何實現自適應布局的?

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

rem如何實現自適應布局的

w3c上面說 rem是相對長度單位,相對於根元素 即html元素 font size計算值的倍數 rem font size of the root element 是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位,em font size of the...