亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

rem適配移動(dòng)設(shè)備

韓冰 / 2053人閱讀

摘要：前言移動(dòng)端適配方案回顧總結(jié)如何使用單位的計(jì)算參考的根節(jié)點(diǎn)進(jìn)行計(jì)算，根節(jié)點(diǎn)的字體變化，布局參考的頁(yè)面也會(huì)相應(yīng)進(jìn)行縮放，此為布局的本質(zhì)。動(dòng)態(tài)改變的值幾乎在每個(gè)瀏覽器都將的初始化為，我們動(dòng)態(tài)改變的話可以暫時(shí)將設(shè)置為適配的根節(jié)點(diǎn)初始值。

前言

移動(dòng)端 rem 適配方案回顧總結(jié)

如何使用 rem

rem 單位的計(jì)算參考 html 的根節(jié)點(diǎn) font-size進(jìn)行計(jì)算，根節(jié)點(diǎn)的字體變化，布局參考的 rem 頁(yè)面也會(huì)相應(yīng)進(jìn)行縮放，此為 rem 布局的本質(zhì)。

1. 動(dòng)態(tài)改變 html 的 font-size 值

幾乎在每個(gè)瀏覽器都將 html 的 font-size 初始化 為 16px ， 我們動(dòng)態(tài)改變的話可以暫時(shí)將 16px 設(shè)置為 rem 適配的根節(jié)點(diǎn) font-size 初始值。

那么如何進(jìn)行適配動(dòng)態(tài)修改？

假定設(shè)計(jì)稿寬度 為 750px，我們定義了自己使用 1rem = 16px 的單位去布局，如何適配呢？

在 chrome 的 手機(jī) iphone 模擬器寬度為 375px，正好為設(shè)計(jì)稿的 一半，我們可以口算: 當(dāng)時(shí)的 1rem 應(yīng)該等于初始化時(shí) html 節(jié)點(diǎn) font-size 的一半,即 newFontSize = 16/2 = 8px,這樣一半對(duì)一半不就適配了嗎...

從中得到公式 設(shè)計(jì)稿寬度/16px = 需要適配的設(shè)備寬度/8px,能夠看出 新的 font-size 是參考 當(dāng)前的設(shè)備寬度與原設(shè)計(jì)稿的寬度，進(jìn)行等比縮放的

最終得到 newFontSize = 16px * 需要適配的設(shè)備寬度 / 原設(shè)計(jì)稿寬度

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);
2. 實(shí)際使用

將測(cè)量得出的btn 按鈕的樣式從 px轉(zhuǎn)換 為 rem

.btn {
  width: 699px; /* 699/16 => 43.6875rem; */
  height: 90px; /* 90/16px => 5.625rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/16=> 0.375rem; */
}

自己計(jì)算太繁瑣，使用 scss 定義 函數(shù)代替計(jì)算過(guò)程

@function pxToRem($initialStyle) {
  @return $initialStyle/16 * 1rem;
}

那么上面的 css改寫(xiě)為:

.btn {
  width: pxToRem(699);
  height:pxToRem(90);
  background: rgba(90, 173, 246, 1);
  border-radius:pxToRem(6);
}
補(bǔ)充： vscode 的插件 cssrem 支持計(jì)算 將我們?cè)?css,scss 中輸入的 px 轉(zhuǎn)換為 rem 單位，默認(rèn)設(shè)置的 font-size 為 16px
計(jì)算方法變形，口算 rem 1. 簡(jiǎn)單分析

分析上一節(jié)我們最終得到 newFontSize = 16px * 需要適配的設(shè)備寬度 / 原設(shè)計(jì)稿寬度

每次計(jì)算要除以 16 很是繁瑣，我們?nèi)魧?初始的 html 根節(jié)點(diǎn) font-size變?yōu)榉奖阌?jì)算的，反正它最終做為一個(gè)除數(shù)，變?yōu)槎嗌倌? 是否 100 更為方便呢？對(duì)了！

const oHtml = document.documentElement;
const clientWidth = oHtml.clientWidth;
var vM = 750;
var vfontSize = 100;
// 移動(dòng)設(shè)備
oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px";
2. 實(shí)際使用

還是上面熟悉的那個(gè) btn, 將px轉(zhuǎn)換 為 rem, 口算得出結(jié)果。

.btn {
  width: 699px; /* 699/100 => 6.99rem; */
  height: 90px; /* 90/100 => 0.9rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/100=> 0.06rem; */
}

不得不說(shuō)，有了 scss 是真的方便！

@function reduced100($initialStyle) {
  @return $initialStyle/100 * 1rem;
}

那么上面的 css函數(shù)方法改寫(xiě)為:

.btn {
  width: reduced100(699);
  height:reduced100(90);
  background: rgba(90, 173, 246, 1);
  border-radius:reduced100(6);
}

怎么樣，rem 原來(lái)就是這么簡(jiǎn)單?。?！

工具函數(shù)

上面的方法，二選其一就可以了，畢竟現(xiàn)在 javascript 的 執(zhí)行效率不差！

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114506.html

相關(guān)文章

  • 移動(dòng)端的3種適配方法

    摘要：做移動(dòng)端頁(yè)面以來(lái)，經(jīng)常會(huì)聽(tīng)說(shuō)移動(dòng)端的適配這個(gè)問(wèn)題，但是并沒(méi)有認(rèn)真分析過(guò)是如何適配各種機(jī)型的。目前公司用的是手淘的進(jìn)行頁(yè)面適配的。手淘那個(gè)還有的地方看不懂，還是自己太了，但是看不懂車不影響老司機(jī)開(kāi)車。 做移動(dòng)端頁(yè)面以來(lái)，經(jīng)常會(huì)聽(tīng)說(shuō)移動(dòng)端的適配這個(gè)問(wèn)題，但是并沒(méi)有認(rèn)真分析過(guò)是如何適配各種機(jī)型的。目前公司用的是手淘的flexible.js進(jìn)行頁(yè)面適配的。適配的根本原理其實(shí)就是將設(shè)計(jì)稿按一定的...

    SwordFly 評(píng)論0 收藏0

  • 移動(dòng)端的3種適配方法

    摘要：做移動(dòng)端頁(yè)面以來(lái)，經(jīng)常會(huì)聽(tīng)說(shuō)移動(dòng)端的適配這個(gè)問(wèn)題，但是并沒(méi)有認(rèn)真分析過(guò)是如何適配各種機(jī)型的。目前公司用的是手淘的進(jìn)行頁(yè)面適配的。手淘那個(gè)還有的地方看不懂，還是自己太了，但是看不懂車不影響老司機(jī)開(kāi)車。 做移動(dòng)端頁(yè)面以來(lái)，經(jīng)常會(huì)聽(tīng)說(shuō)移動(dòng)端的適配這個(gè)問(wèn)題，但是并沒(méi)有認(rèn)真分析過(guò)是如何適配各種機(jī)型的。目前公司用的是手淘的flexible.js進(jìn)行頁(yè)面適配的。適配的根本原理其實(shí)就是將設(shè)計(jì)稿按一定的...

    dockerclub 評(píng)論0 收藏0

  • 移動(dòng)端適配方案

    摘要：業(yè)務(wù)環(huán)境是決定整體項(xiàng)目的適配方案的核心因素。而淘寶的主站和類似，分為移動(dòng)端頁(yè)面和端頁(yè)面，端頁(yè)面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時(shí)候?qū)⒆⒁饬性谥虚g區(qū)域。 移動(dòng)端適配方案 移動(dòng)端適配方案是一個(gè)老生常談的話題，但是對(duì)于不同的項(xiàng)目、不同的業(yè)務(wù)場(chǎng)景可能會(huì)需要不同的適配方案來(lái)進(jìn)行移動(dòng)端適配，向下兼容的baseline也需要提前訂好。 整體寬高 其實(shí)移動(dòng)端適配就和下面的玩具一樣，...

    feng409 評(píng)論0 收藏0

  • 一次搞清楚移動(dòng)端適配這幾個(gè)坑爹的單位慨念

    摘要：真的是給我們新手學(xué)習(xí)移動(dòng)端適配造成不少困惑英語(yǔ)真的很重要呀。細(xì)節(jié)高清屏上的處理其實(shí)并不是所有做移動(dòng)端適配的人都一定會(huì)遇到這個(gè)問(wèn)題。 一次搞清楚移動(dòng)端這幾個(gè)坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計(jì)稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動(dòng)端屏幕的自動(dòng)適配的處理 移動(dòng)端屏幕上字體大小的處理...

    objc94 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<