明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

對于移動 web 端屏幕適配(rem)的說明

發(fā)表時間：2023-09-08 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這篇文章主要介紹了移動 web 端屏幕適配(rem)。詳細的介紹了移動 web 端屏幕適配（rem），內(nèi)容挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。前言最近整理了一下以前學(xué)習(xí)前端的筆記，發(fā)現(xiàn)自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動 web...
這篇文章主要介紹了移動 web 端屏幕適配(rem)。詳細的介紹了移動 web 端屏幕適配（rem），內(nèi)容挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。

前言

最近整理了一下以前學(xué)習(xí)前端的筆記，發(fā)現(xiàn)自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。

接下來，把自己的一些對移動 web 端屏幕適配（rem）的思考記錄下來。

rem 介紹

rem 表示根元素（<html>）的 font-size 的大小。即如果根元素的 font-size 大小為 14px，則 1rem = 14px

rem 適配移動 web 端

適配效果

在不同尺寸的屏幕下，同一個元素的大小看起來不是一樣大的，但是它們所占屏幕寬度的比例是一樣的。

代碼

// 在 html 文件的 head 標(biāo)簽中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 獲取屏幕寬度（px）
    var hWidth = html.getBoundingClientRect().width;
    // 設(shè)置 html 標(biāo)簽的 font-size 大小為 hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>

// 在 less 中
/* 定義變量@r：750/15 */
@r:50rem; 
p {
  width: 100/@r;
  height: 200/@r;
}

javascript 代碼

首先，我們將屏幕的 1/15 大�。╬x）復(fù)制給 html 標(biāo)簽的 font-size 屬性。此時，在任何尺寸的屏幕上，屏幕尺寸（px）的 1/15 px 都等于 1rem 的大小。即：在任何尺寸的屏幕上，只要給元素設(shè)置值相同的 rem，則在所有尺寸的屏幕上該元素所占屏幕寬度的比例是一樣的，所占比例一樣，就適配了所有尺寸的屏幕。

less 代碼

現(xiàn)在只需要將設(shè)計稿中元素的 px 單位轉(zhuǎn)換為 rem 單位。

所以，這個時候，我們可以把設(shè)計稿也當(dāng)成一個具有一定尺寸的手機屏幕。
在我這個例子中，設(shè)計稿的寬度為 750px。

所以，750/15 = 50px，即在設(shè)計稿這樣尺寸的手機屏幕中，1rem = 50px。

然后，在 less 代碼中，我們定義一個變量 @r。

量得 p 的寬度為 100px，因為在設(shè)計稿這樣尺寸的屏幕中，1rem = 50px，所以該 p 的 rem 的值為：100/50 rem，即 100/@r。

量得 p 的高度為 200px，因為在設(shè)計稿這樣尺寸的屏幕中，1rem = 50px，所以該 p 的 rem 的值為：200/50 rem，即 200/@r。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

關(guān)于HTML中rel屬性的分析

html頁面中meta的作用以及頁面的緩存與不緩存設(shè)置的解析

以上就是關(guān)于移動 web 端屏幕適配(rem)的介紹的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。