七、rem響應式布局

rem響應式布局思想

• 一般不要給元素設置具體的寬度,但是對于一些小圖標可以設定具體寬度值
• 高度值可以設置固定值,設計稿有多大,我們就嚴格寫多大
• 所有設置的固定值都用REM做單位(首先在HTML中設置一個基準值：PX和REM的對應比例,然后在效果圖上獲取PX值,布局的時候轉化為REM值)
• JS獲取真實屏幕的寬度,讓其除以設計稿的寬度,算出比例,把之前的基準值按照比例進行重新的設定,這樣項目就可以在移動端自適應了
   

什么是rem,它與em有何區別

rem:當前頁面中元素的REM單位的樣式值都是針對于HTML元素的font-size的值進行動態計算的
em:表示父元素的字號的倍數。(特例：在text-indent屬性中，表示文字寬度)

body  →font-size:20px;
 <div class="box1">   → font-size:2em;
  box1
    <div class="box2">  → font-size:2em;
      box2
      <div class="box3">  → font-size:2em;
          box3
      </div>
   </div>
</div>

em為單位的時候，font-size屬性是計算后繼承，box1計算出來是40px。那么里面的box2、box3繼承的都是40px。em單位不僅僅可以用來設置字號，還可以設置任何盒模型的屬性，比如width、height、padding、margin、border
rem有一點優勢就是可以和媒體查詢配合，實現響應式布局：

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}

運用場景

如果我們做的H5頁面只在移動端訪問，這是因為REM不兼容低版本的瀏覽器。而如果移動端和PC端公用一套代碼，建議使用流式布局。

如何做個REM響應式布局

1、從UI設計師拿到PSD設計稿,然后在樣式中給HTML設定一個font-size的值，我們一般都設置一個方便后面計算的值，例如：100px

html{
font-size:100px；//1rem=100px
}

2、寫頁面，寫樣式

首先按照設計稿的尺寸來寫樣式，然后在寫樣式值的時候，需要把得到的像素值除以100計算出對應的REM的值。
值得注意的是：真實項目中外層盒子的寬度我們一般還是不寫固定值，沿用流式布局法的思想，我們用百分比的方式布局

margin:0  0.2rem
height:3rem；

3、根據當前屏幕的寬度和設計稿的寬度來計算我們HTML的font-size的值

例如：設計稿寬度為640px,其中有一個部分是輪播圖，它的尺寸是600*300，在樣式中給HTML設定一個font-size的值為100px,則輪播圖大小應該為 6rem×3rem，那如果手機屏幕寬度為375px,其font-size應該設置為多少。

375/640*100->fontsize=58.59375//此時輪播圖能自適應手機屏幕大小

根據當前屏幕寬度和設計稿寬度的比例，動態計算一下當前寬度下的fontsize值應該是多少，如果fontsize的值改變了，之前設定的所有REM單位的值自動會跟著放大或者縮小。可以通過以下這段代碼實現：

<script>
~function(){
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW；
document.documentElement.style.fontSize=ratio*100+“px“；
}();
</script>

但如果當前屏幕寬度大于設計稿寬度，圖片會被拉長而失真，所以以上代碼需要稍微做些修改：

//html部分
<section id="main">
<div class="box"></div>
</section>
//js部分
<script>
~function(){
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW；
var oMain=document.getElementById（'main'）；
if(winW>desW){
oMain.style.width=desW+"px"；
oMain.style.margin="0 auto"；
return；
}
document.documentElement.style.fontSize=ratio*100+“px“；
}();
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助