Rem 字型設定學習
(2)JS方法動態計算根元素的字型大小: 【淘寶首頁:m.taobao.com】
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
然後根據設計稿比如尺寸是640尺寸 就 rem = 設計稿的字型大小 / 100
16px —> 0.16rem
相關文章
- web app響應式字型設定!rem之我見WebAPPREM
- (高階)用CSS3新增的rem單位設定字型大小CSSS3REM
- (資料科學學習手札100)搞定matplotlib中的字型設定資料科學
- css字型設定CSS
- sqldeveloper 字型設定SQLDeveloper
- Vue專案rem佈局設定VueREM
- LaTeX字型設定(三)
- matplotlib預設字型設定
- 淘寶 rem 機制入門學習REM
- 關於移動端rem的設定REM
- word字型怎麼設定?
- 設定Toast字型顏色AST
- 徹底弄懂設定根元素字型大小calc(100vw/18.75) 實現rem自適應REM
- MIUI 7巨無霸字型在哪設定 MIUI 7巨無霸字型設定教程UI
- word藝術字型如何設定?
- Hype如何設定字型樣式
- phpStrom字型+主題設定PHP
- css 字型樣式設定大全CSS
- CSS如何設定字型的大小CSS
- linux下thunderbird字型設定Linux
- win10電腦字型大小怎麼設定_win10如何設定字型大小Win10
- PostCSS深入學習:Gulp設定CSS
- win10字型平滑怎麼設定_win10系統設定字型平滑的方法Win10
- markdown字型顏色和背景設定
- CSS 設定字型顏色和大小CSS
- JavaScript設定字型放大和縮小JavaScript
- PowerDesinger15設定字型大小
- 設定placeholder的字型顏色
- Linux中的字型設定 (轉)Linux
- PostCSS深入學習:設定選項CSS
- vivo Z3字型怎麼設定?vivo Z3字型設定方法教程
- 前端資源 - 字型 - 學習/實踐前端
- word字型顏色怎麼快速設定?
- android 字型設定為中等粗細Android
- JavaScript動態設定文字字型大小JavaScript
- Intellij IDEA 設定字型的大小IntelliJIdea
- JavaScript設定網頁字型大中小JavaScript網頁
- 設定placeholder字型顏色程式碼