欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

移動(dòng) web 端屏幕適配(rem)

  發(fā)布時(shí)間：2018-06-25 15:12:46   作者：hileix   我要評(píng)論
這篇文章主要介紹了移動(dòng) web 端屏幕適配(rem)。詳細(xì)的介紹了移動(dòng) web 端屏幕適配（rem），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

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

接下來(lái)，把自己的一些對(duì)移動(dòng) web 端屏幕適配（rem）的思考記錄下來(lái)。

rem 介紹

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

rem 適配移動(dòng) web 端

適配效果

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

代碼

// 在 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; 
div {
  width: 100/@r;
  height: 200/@r;
}

javascript 代碼

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

less 代碼

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

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

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

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

量得 div 的寬度為 100px，因?yàn)樵谠O(shè)計(jì)稿這樣尺寸的屏幕中，1rem = 50px，所以該 div 的 rem 的值為：100/50 rem，即 100/@r。

量得 div 的高度為 200px，因?yàn)樵谠O(shè)計(jì)稿這樣尺寸的屏幕中，1rem = 50px，所以該 div 的 rem 的值為：200/50 rem，即 200/@r。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Html5移動(dòng)端適配IphoneX等機(jī)型的方法

    這篇文章主要介紹了Html5移動(dòng)端適配IphoneX等機(jī)型的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起
    2019-06-25

  • rem適配移動(dòng)設(shè)備的方法示例

    這篇文章主要介紹了rem適配移動(dòng)設(shè)備的方法示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-04-25

  • 淺談移動(dòng)端適配大法

    這篇文章主要介紹了淺談移動(dòng)端適配大法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-05

  • 詳解如何使用image-set適配移動(dòng)端高清屏圖片

    這篇文章主要介紹了詳解如何使用image-set適配移動(dòng)端高清屏圖片的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-14

  • 詳解H5 活動(dòng)頁(yè)之移動(dòng)端 REM 布局適配方法

    這篇文章主要介紹了詳解H5 活動(dòng)頁(yè)之移動(dòng)端 REM 布局適配方法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-07

  • html5實(shí)現(xiàn)移動(dòng)端適配完美寫法

    這篇文章主要介紹了html5實(shí)現(xiàn)移動(dòng)端適配完美寫法,需要的朋友可以參考下
    2017-11-16

  • 手機(jī)端用rem+scss做適配的詳解

    這篇文章主要介紹了手機(jī)端用rem+scss做適配的詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-15

  • 移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem

    這篇文章主要介紹了移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem的相關(guān)資料,需要的朋友可以參考下
    2019-08-26

最新評(píng)論