rem適配移動(dòng)設(shè)備的方法示例
我要評(píng)論前言
移動(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改寫為:
.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ù)方法改寫為:
.btn {
width: reduced100(699);
height:reduced100(90);
background: rgba(90, 173, 246, 1);
border-radius:reduced100(6);
}
怎么樣，rem 原來(lái)就是這么簡(jiǎn)單?。。?/p>
工具函數(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);
以上就是本文的全部?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- 這篇文章主要介紹了淺談移動(dòng)端適配大法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-05
詳解如何使用image-set適配移動(dòng)端高清屏圖片
這篇文章主要介紹了詳解如何使用image-set適配移動(dòng)端高清屏圖片的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-14- 這篇文章主要介紹了移動(dòng) web 端屏幕適配(rem)。詳細(xì)的介紹了移動(dòng) web 端屏幕適配（rem），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-25
詳解H5 活動(dòng)頁(yè)之移動(dòng)端 REM 布局適配方法
這篇文章主要介紹了詳解H5 活動(dòng)頁(yè)之移動(dòng)端 REM 布局適配方法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-07html5實(shí)現(xiàn)移動(dòng)端適配完美寫法
這篇文章主要介紹了html5實(shí)現(xiàn)移動(dòng)端適配完美寫法,需要的朋友可以參考下2017-11-16- 這篇文章主要介紹了手機(jī)端用rem+scss做適配的詳解,小編覺(jué)得挺不錯(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
