這篇文章將為大家詳細(xì)講解有關(guān)REM相對(duì)單位怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

吳橋網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,吳橋網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為吳橋1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的吳橋做網(wǎng)站的公司定做！

這次給大家?guī)?lái)REM相對(duì)單位使用案例分享，REM相對(duì)單位使用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

   rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位?？吹絩em大家一定會(huì)想起em單位，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過(guò)一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。

上面說(shuō)過(guò)rem是通過(guò)根元素進(jìn)行適配的，網(wǎng)頁(yè)中的根元素指的是html我們通過(guò)設(shè)置html的字體大小就可以控制rem的大小，舉個(gè)例子。

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

我們通過(guò)改變html中的font-size的大小來(lái)控制我們的dom元素的字體大小。

為了適配不同分辨率的兼容，可以通過(guò)js來(lái)動(dòng)態(tài)生成html里的font-size的大小，我們也可以針對(duì)主流機(jī)型通過(guò)media query來(lái)設(shè)置。例如下面這邊代碼，不太了解media query可以學(xué)習(xí)下http://www.w3cplus.com/content/css3-media-queries

html{font-size: 20px;}
@media only screen and (min-width: 320px){
    html{font-size: 20px !important;}
}
@media only screen and (min-width: 350px){
    html{font-size: 22.5px !important;}
}
@media only screen and (min-width: 365px){
    html{font-size: 23px !important;}
}
@media only screen and (min-width: 375px){
    html{font-size: 23.5px !important;}
}
@media only screen and (min-width: 390px){
    html{font-size: 24.5px !important;}
}
@media only screen and (min-width: 400px){
    html{font-size: 25px !important;}
}
@media only screen and (min-width: 428px){
    html{font-size: 26.8px !important;}
}
@media only screen and (min-width: 432px){
    html{font-size: 27.4px !important;}
}
@media only screen and (min-width: 481px){
    html{font-size: 30px !important;}
}
@media only screen and (min-width: 569px){
    html{font-size: 35px !important;}
}
@media only screen and (min-width: 641px){
    html{font-size: 40px !important;}
}

當(dāng)然在設(shè)置html中的font-size的時(shí)候，我們還可能會(huì)看到這樣的寫(xiě)法，html {  font-size: 62.5% }。這主要是為了方便em與px相互轉(zhuǎn)換，em的初始值為1em=16px，顯然這樣的話，如1.2em則=19.2px，可是我們?cè)谠O(shè)置的時(shí)候很少看見(jiàn)19.2px這樣表示的大小，也就是在用px表示大小時(shí)數(shù)值是不帶小數(shù)位的。當(dāng)設(shè)置了body{font-size: 62.5%;}時(shí)，1em則=16px*62.5%=10px,1.2em則=12px，這是不是就簡(jiǎn)單多了，準(zhǔn)確多了呢~~。

關(guān)于“REM相對(duì)單位怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。