rem

rem是設想相應式網頁的神器，由於rem單元是相對HTML元素的font-size屬性的，因而當運用rem作為屬性單元時，當轉變HTML元素的font-size，其他運用rem作為單元的元素也會隨着適配大小。那末怎樣依據屏幕的大小製造一個相應式的網頁呢。

• 用css媒體查詢
• 用相當於視口寬度單元的vw值（這個下一部份講）

這裏先說說用css媒體查詢，如下面所示，屏幕查詢能夠指定一個屏幕大小，當屏幕是你指定的大小時，它就會運轉內里的代碼，然則這類要領有一個瑕玷—它並不能掌握越發準確的尺寸，所以我們能夠運用vm來處理這個題目。

<style>
    body,div{
        margin:0;
        padding:0;
    }
    html{
        font-size:12px;
    }
    @media screen and (min-width:320px){
        html{
            font-size:14px;
        }
        
    }
    @media screen and (min-width:640px){
        html{
            font-size:16px;
        }
        
    }
    @media screen and (min-width:1000px){
        html{
            font-size:18px;
        }
    }
    .box{
        width:10rem;
        height:10rem;
        font-size:2rem;
        background-color:pink;
    }
</style>
<div class="box">rem</div>

vw,vh,vmin,vmax基於視口的單元

視口單元能夠用來什麼，比方:

• 完成相應式
• 設置相對視口的寬度和高度，能夠完成程度垂直居中
• 完成網格規劃
• 將圖片根據屏幕的比例顯現

這幾個單元是相對於視口的，也就是可視地區，統共分成了100份。假如想讓一個字體的大小在指定的區間內變化，比方可視地區的大小在980px-320px時，讓字體的大小在14-20之間變化，能夠

14-(20-14)*(980-320)/(980-320)

<style>
    body,div{
        margin:0;
        padding:0;
    }
    html{
        font-size:20px;
    }
    @media screen and (max-width:980px){
        html{
            font-size:calc(14px+6*(100vm-320px)/660);
        }
        
    }
    .box{
        width:10rem;
        height:10rem;
        font-size:2rem;
        background-color:pink;
    }
</style>
<div class="box">rem</div>

除了用這些基於視口的單元來做相應式，還能夠做一些其他的事變。我們曉得，假如某個值能夠繼續，則百分比參照的是父元素盤算的值。而當父元素不設置高度時，則是依據子元素高度來肯定的。所以，假如沒有直接設置寬度和高度，100%的設置是沒有作用的。假如用視口單元，就不會有這類狀況了，由於它是相對屏幕可視區的

.box{
  width:100vw;
  height:100vh;
  background-color:pink;
}

假如要完成程度垂直居中

<style>
  body,div{
  margin:0;
  padding；0；
}
.box{
  width:100px;
  height:100px;
  margin-left:calc(50vw-50px);
  margin-top:calc(50vh-50px);
  background-color；pink;
}
</style>
<div class="box">hello css</div>

用視口來完成網格規劃

<style>
body,div{
  margin:0;
}
.column-1{
  float:left;
  width:100vw;
}
.column-2{
  float:left;
  width:calc(100vw/2);
}
.column-3{
  float:left;
  width:calc(100vw/3);
}
body>div{
  overflow；hidden；
}
div>div{
  height:35px;
  outline:1px solid #dedede;
}
.box-1 div{
  background-color:red;
}
.box-2 div{
  background-color:orange;
}
.box-3 div{
  background-color:pink;
}
</style>
 <div class="box-1">
   <div class="column-1"></div>
 </div>
 <div class="box-2">
   <div class="column-2"></div>
   <div class="column-2"></div>
 </div>
 <div class="box-3">
   <div class="column-3"></div>
   <div class="column-3"></div>
   <div class="column-3"></div>
  </div>

別的，當須要將圖片根據屏幕的比例顯現時，用視口單元也是不錯的挑選

ch

ch是一個相對於数字0的大小，比方定義了5ch的寬度，那末就只能裝下5個0。實際上1ch=1個英文=1個数字，2ch=1个中文。

 <style>
        body,div{
            margin:0;
            padding:0;
        }
        .box{
            width:5ch;
            background-color:grey;
        }

    </style>
    <div class="box">
     000000
    </div>

假如項目須要限定輸入個數，能夠運用下面代碼

<style>
        body,div{
            margin:0;
            padding:0;
        }
        h1{
            width:18ch;
            overflow: hidden;//超越隱蔽
            white-space: nowrap;//防備換行
            text-overflow: ellipsis;//省略號
            font-size: 50px;
            background-color: deeppink;
        }

    </style>
    <h1>
     題目被限定輸入了，超越隱蔽哦。
    </h1>