大家好我是在成都做網(wǎng)站開發(fā)的一名網(wǎng)站開發(fā)工程師

最近在進(jìn)行網(wǎng)站開發(fā)時發(fā)現(xiàn)了rem這個方法，下面我?guī)Т蠹伊私庖幌翲TML紅如何使用rem布局。

我們先來簡單了解rem是什么：rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。

所以我們只要定義好html的字體大小就可以了。

那么下面我就介紹三種rem的用法

第一種是最簡單的類型

1.我們可以直接給html標(biāo)簽一個固定的font-size屬性如html{fon-size: 10px;} 這種情況1rem就等于是10px,做到響應(yīng)式的朋友可以嘗試使用第二種方法

2.@media (min-width:640px){html{font-size:24px;}} //我們可以通過媒體查詢標(biāo)簽動態(tài)定義html的font-size屬性進(jìn)而實現(xiàn)根據(jù)屏幕變化，改變1rem=多少px

第三種會涉及到j(luò)s

//定義一個函數(shù)

3. var fon = function () {

// 這個a就是瀏覽器可是寬度

var a=document.body.offsetWidth

//我們可以根據(jù)瀏覽器可是寬度來設(shè)置html的font-size屬性

//屏幕可視寬度大于等于1023

if(a>=1023){

document.getElementsbyTagName("html")[0].style.fontSize = a/19.20 + 'px'; //把rem的值復(fù)制給頂級標(biāo)簽html的font-size

//我這里是做了兩種適配，第一種瀏覽器可視寬度是1920px 所以讓1920/19.2=100 1em=100px

//1920/192=10 1rem=10px

console.log(document.body.offsetWidth /19.20)

}else{//我這里因為除不進(jìn)所以調(diào)用一下下面的方法

document.getElementsbyTagName("html")[0].style.fontSize = Math.round(a/4.14) + 'px'; //把rem的值復(fù)制給頂級標(biāo)簽html的font-size

//我這里是做了兩種適配，第二種瀏覽器可是寬度是414px 所以讓414/4.14

console.log(document.body.offsetWidth /4.14)

}

}

fon()

//瀏覽器可視寬度變化就執(zhí)行這個調(diào)用一下函數(shù)，更改html的font-size屬性

window.onresize = function () {

fon()

}

//像這種除不盡的情況大家可以使用下面的方法，先取整然后再更改html的font-size屬性

414/4.14=100.00000000000001

//round: 四舍五入

//Math.round(414/4.14) = 100

以上就是成都創(chuàng)新互聯(lián)做網(wǎng)站開發(fā)的工程師為大家?guī)淼年P(guān)于rem的相關(guān)介紹，希望對大家有所幫助。

如果大家對rem還有什么想要了解，大家可以關(guān)注成都創(chuàng)新互聯(lián)官方公眾號“創(chuàng)新互聯(lián)π”，其中會有大量關(guān)于”互聯(lián)網(wǎng)+”的相關(guān)的內(nèi)容供大家互相學(xué)習(xí)了解，同時歡迎大家一起討論技術(shù)問題。

網(wǎng)頁名稱：HTML中如何使用rem
文章來源：http://www.rwnh.cn/news45/310695.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、用戶體驗、ChatGPT、網(wǎng)站收錄、外貿(mào)建站、面包屑導(dǎo)航

廣告

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