七、rem響應(yīng)式布局

rem響應(yīng)式布局思想

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

什么是rem,它與em有何區(qū)別

rem:當(dāng)前頁面中元素的REM單位的樣式值都是針對于HTML元素的font-size的值進(jìn)行動態(tài)計(jì)算的
em:表示父元素的字號的倍數(shù)。(特例：在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為單位的時(shí)候，font-size屬性是計(jì)算后繼承，box1計(jì)算出來是40px。那么里面的box2、box3繼承的都是40px。em單位不僅僅可以用來設(shè)置字號，還可以設(shè)置任何盒模型的屬性，比如width、height、padding、margin、border
rem有一點(diǎn)優(yōu)勢就是可以和媒體查詢配合，實(shí)現(xiàn)響應(yīng)式布局：

@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;}
}

運(yùn)用場景

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

如何做個(gè)REM響應(yīng)式布局

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

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

2、寫頁面，寫樣式

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

margin:0  0.2rem
height:3rem；

3、根據(jù)當(dāng)前屏幕的寬度和設(shè)計(jì)稿的寬度來計(jì)算我們HTML的font-size的值

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

375/640*100->fontsize=58.59375//此時(shí)輪播圖能自適應(yīng)手機(jī)屏幕大小

根據(jù)當(dāng)前屏幕寬度和設(shè)計(jì)稿寬度的比例，動態(tài)計(jì)算一下當(dāng)前寬度下的fontsize值應(yīng)該是多少，如果fontsize的值改變了，之前設(shè)定的所有REM單位的值自動會跟著放大或者縮小。可以通過以下這段代碼實(shí)現(xiàn)：

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

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

//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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助