rem絕對自適應方案

這個單位代表根元素的 

font-size

大小（例如

元素的font-size）。

media的用法這裡就不贅述，簡單說明通過**查詢修改html的font-size以達到頁面自適應的目的。

html如下：

<

article 
class
="container"
>
<
ol>
<
li>rem是相對於root元素(html)字型大小的乙個單位。 eg:html預設font-size為16px  則1rem = 16px
li>
<
li>若元素以rem為單位去設定字型、寬高、邊距等。則修改html字型大小就能達到所有元素一起等比例修改的效果
li>
<
li>所以要實現html字型在不同頁面大小下自適應
li>
ol>
article
>

css如下：

//**查詢控制html字型大小 

@media (max-width:767px) }
@media (min-width:768px) }
@media (min-width:992px) }
//頁面元素的簡單樣式
.containerli

通過**查詢，在不同大小區間的頁面上，設定html的font-size都不一樣；

頁面寬度為700px時，html的字型大小為14px，此時 1rem = 14px ，li元素的字型大小就是14px，包裹的內邊距也是14px；改變頁面寬度為800px，html的字型大小為16px，此時 1rem = 16px ，li元素的字型大小變為16px，包裹的內邊距也變為16px；

這種方式當然**查詢劃分的越細緻，自適應越強，但是無法實現完全自適應，只是區間性的。

vw代表的視口的 1/100 100vw代表的即是視口的寬度。使用它我們就可以實現html的font-size完全自適應了。

css如下：

html

例子的768px為乙個假設的標準值，一般設計稿的大小為標準，然後再進行適配。調節頁面大小，可以完全自適應。

載入頁面和調整視窗大小的時，設定html的字型大小，已達到自適應的目的。

(function()if (!doc.addeventlistener) return;

window.addeventlistener(resizeevt,changefontsize)  //視窗大小變化或者手機橫屏
document.addeventlistener('domcontentloaded',changefontsize) //載入頁面觸發
})()

1、獲取視口寬度

2、以視口寬度對標準的變化，設定html的font-size

rem絕對自適應方案

這個單位代表根元素的font size大小 例如元素的font size 使用這個單位可以建立完美的可擴充套件布局，只需根據頁面大小去修改html的font size，就能達到適配整個頁面的目的。那麼問題來了，如何使html的font size自適應呢？media的用法這裡就不贅述，簡單說明通過 查...

移動端自適應方案 rem布局

1 什麼是rem rem font size of the root element 是乙個相對單位，它是根據根元素 html 的font size大小來計算的，如根元素字型大小為10px，那麼1rem 10px em font size of the element 也是乙個相對單位，它是根據父元...

Rem 自適應布局

1.先引入一下js,到頭部的script標籤的最前面。2.根據設計稿大小，調整裡面的最後兩個引數值。3.使用1 rem 100px轉換你的設計稿的畫素，例如設計稿上某個塊是100px 300px,換算成 rem則為1 rem 3rem。上面的 如果在 uc瀏覽器下橫屏與豎屏轉換，發現 並沒有 自適應...