REM相對單位怎么用-創(chuàng)新互聯(lián)

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

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)網(wǎng)站建設(shè)、成都做手機(jī)網(wǎng)站、網(wǎng)頁設(shè)計(jì)、成都品牌網(wǎng)站建設(shè)、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺設(shè)計(jì)專才。這次給大家?guī)鞷EM相對單位使用案例分享，REM相對單位使用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

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

上面說過rem是通過根元素進(jìn)行適配的，網(wǎng)頁中的根元素指的是html我們通過設(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;    
}

我們通過改變html中的font-size的大小來控制我們的dom元素的字體大小。

為了適配不同分辨率的兼容，可以通過js來動(dòng)態(tài)生成html里的font-size的大小，我們也可以針對主流機(jī)型通過media query來設(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ì)看到這樣的寫法，html {  font-size: 62.5% }。這主要是為了方便em與px相互轉(zhuǎn)換，em的初始值為1em=16px，顯然這樣的話，如1.2em則=19.2px，可是我們在設(shè)置的時(shí)候很少看見19.2px這樣表示的大小，也就是在用px表示大小時(shí)數(shù)值是不帶小數(shù)位的。當(dāng)設(shè)置了body{font-size: 62.5%;}時(shí)，1em則=16px*62.5%=10px,1.2em則=12px，這是不是就簡單多了，準(zhǔn)確多了呢~~。

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

新聞標(biāo)題：REM相對單位怎么用-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article38/ipcpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、建站公司、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)