html中rem的理解&簡單運用示例
阿新 • • 發佈:2019-01-06
作為一名前端開發工程師,很有必要梳理並記錄下自己成長過程中的問題,以溫故知新。
儘量做到:
- 把前端開發成長中遇到的概念,原子性的拆分開,單獨的去理解學習;
- 不新增太多個人情感化詞句,以知識為中心;
- 會運用,不等於理解,文章側重於理解
?rem是什麼
rem是css中的單位。
類同舉例:
height: 1px
表示
height
的值為1個css畫素;vertial-align: 50%
表示
vertial-align
的值為設定該樣式的元素的當前line-height 的高度的一半;width: 1rem
表示
width
的值為1 倍的dom文件的html標籤上font-size的值,即如果html的font-size為14px,那麼width
的值就是1倍的14px,即14px.
px, %, rem均表示一種單位
? 進一步理解rem
一些效果需要根據外部盒子的大小自適應,是一個因變數。
div {
width: 50%;
}
例如設定div寬度為50%,表示匹配的div會是外部盒子寬度的一半,通過這種設定,改變了外部盒子寬度後,這些div會跟著調整寬度,即這些div表示為響應式的。
可以理解為:響應的佈局需要有一個參照點,對於上面的例子,該參照點為父級元素
響應式頁面中,通常整個頁面的大部分元素都要根據參照點表現為響應式的,而統一的參考點的最好選擇就是dom最外層的html。
至此,應該不難理解rem的存在意義了。
?如何使用rem
通常設計師提供的效果圖都是指定寬度的效果,如750px等,因此可以在編寫html時,一開始就設定整個dom文件html標籤的font-size,假設設定的font-size為x
,然後頁面的其他元素便可以根據這個參照點,計算出大小並以rem作為單位。
?如何適配解析度不同的裝置
可以動態的改變上述中的x
值,即可使得頁面中設定了rem的元素大小對應變化。
因此可以在html文件中新增javascript指令碼,動態設定x
;(function(win, doc) {
'use strict';
var options = { width: 750, dpr: win.devicePixelRatio };
var html = doc.documentElement,
width = html.getAttribute('data-width') || options.width,
dpr = html.getAttribute('data-dpr') || options.dpr,
viewPort = doc.querySelector('meta[name="viewport"]'),
rotate = win.onorientationchange ? 'orientationchange' : 'resize';
// 設定html fontSize
function setSize() {
var winWidth = win.innerWidth || html.clientWidth;
html.style.fontSize = 100 * winWidth / width + 'px';
};
// 設定 initial-scale
function setScale() {
setSize();
var viewContent = viewPort.getAttribute('content');
var reg = /initial-scale=(\d(.\d+)?)/i;
var matchRes = viewContent.match(reg);
var scale = 1 / parseInt(dpr);
if (matchRes && matchRes[1] == scale) {
return;
}
var newContent = viewContent.replace(reg, function(a, b) {
return a.replace(/\d(.\d+)?/i, scale);
});
viewPort.setAttribute('content', newContent);
};
win.addEventListener(rotate, setSize);
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
requestAnimationFrame(setScale);
}(window, document));
至此,結束。