建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細講解有關(guān)REM相對單位怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
吳橋網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,吳橋網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為吳橋1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的吳橋做網(wǎng)站的公司定做！
這次給大家?guī)鞷EM相對單位使用案例分享，REM相對單位使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。
rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位?？吹絩em大家一定會想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規(guī)則是依賴根元素一個是依賴父元素計算。
上面說過rem是通過根元素進行適配的，網(wǎng)頁中的根元素指的是html我們通過設(shè)置html的字體大小就可以控制rem的大小，舉個例子。
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來動態(tài)生成html里的font-size的大小，我們也可以針對主流機型通過media query來設(shè)置。例如下面這邊代碼，不太了解media query可以學習下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;}
}當然在設(shè)置html中的font-size的時候，我們還可能會看到這樣的寫法，html { font-size: 62.5% }。這主要是為了方便em與px相互轉(zhuǎn)換，em的初始值為1em=16px，顯然這樣的話，如1.2em則=19.2px，可是我們在設(shè)置的時候很少看見19.2px這樣表示的大小，也就是在用px表示大小時數(shù)值是不帶小數(shù)位的。當設(shè)置了body{font-size: 62.5%;}時，1em則=16px*62.5%=10px,1.2em則=12px，這是不是就簡單多了，準確多了呢~~。
關(guān)于“REM相對單位怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
分享標題：REM相對單位怎么用
轉(zhuǎn)載來源：http://fisionsoft.com.cn/article/ppjcic.html
