有的沒(méi)的知識(shí)儲(chǔ)備
響應(yīng)式 —— 在css中瘫里，針對(duì)不同大小的瀏覽器窗口，用不同的方式相應(yīng)更新頁(yè)面的樣式荡碾。
1inch（英寸） = 25.4mm（毫米） = 6pc（pica谨读，印刷術(shù)語(yǔ)，長(zhǎng)度為12points） = 72pt（點(diǎn)） = 96px（像素）
em —— 基準(zhǔn)是 當(dāng)前元素的字號(hào)（font-size）大小坛吁，實(shí)際值取決于在哪個(gè)元素上應(yīng)用劳殖。
- 基準(zhǔn)是當(dāng)前元素的font-size
- 如果當(dāng)前元素的字號(hào)用的是em，那么當(dāng)前元素字號(hào)的基準(zhǔn)是其父元素
- 先算出當(dāng)前元素的font-size的像素值拨脉，再計(jì)算其他使用em作為單位的屬性值大小
rem —— 是根em的縮寫哆姻，基準(zhǔn)是根元素的字號(hào)大小**
視口viewport —— 瀏覽器窗口中用來(lái)渲染頁(yè)面的可視區(qū)域，不包括瀏覽器的地址欄玫膀、工具欄填具、狀態(tài)欄等。
相關(guān)單位
- vh ——視口高度的1/100
- vw——視口寬度的1/100
- vmin——視口寬度或者高度較小值的1/100
- vmax——視口官渡或者高度較大值的1/100（橫豎屏?xí)r可以用這兩個(gè)值）
flexible源碼解讀
// 立即執(zhí)行函數(shù)匆骗，入?yún)⑹莣indow和document
(function flexible (window, document) {
var docEl = document.documentElement
// 文檔的root元素
var dpr = window.devicePixelRatio || 1
// 獲取設(shè)備的dpr（返回當(dāng)前顯示設(shè)備的物理像素分辨率與css像素分辨率之比）劳景，它告訴瀏覽器應(yīng)該使用多少屏幕實(shí)際像素來(lái)繪制單個(gè)css像素，
// adjust body font size
// 調(diào)整body標(biāo)簽的fontsize碉就，fontsize = (12 * dpr) + 'px'
// 設(shè)置默認(rèn)字體大小盟广，默認(rèn)的字體大小繼承自body，如果子元素沒(méi)有設(shè)置font-size就繼承父元素設(shè)置的這個(gè)默認(rèn)字號(hào)（這個(gè)地方有個(gè)疑問(wèn)瓮钥，為什么以12位基準(zhǔn)筋量，是因?yàn)闉g覽器的最小顯示的字號(hào)是12嗎？）
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
// 設(shè)置根元素的fontsize為clientwidth/10（除以10純粹是為了計(jì)算方便）這個(gè)地方也可以直接寫10vw（表示可視窗口的寬度的十分之一）
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
// 當(dāng)頁(yè)面展示或重新設(shè)置大小的時(shí)候碉熄，重新對(duì)rem的px值進(jìn)行計(jì)算
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
px轉(zhuǎn)rem方法
來(lái)做一道應(yīng)用題：
已知屏幕實(shí)際寬度為W桨武，設(shè)計(jì)稿上的屏幕寬度為w，設(shè)計(jì)稿上的某個(gè)元素的寬度是x锈津，求這個(gè)元素實(shí)際寬度X
解：
屏幕實(shí)際寬度和屏幕在設(shè)計(jì)稿上的寬度比與元素實(shí)際寬度和元素在設(shè)計(jì)稿上的寬度比是一樣的
即：W / w = X / x
那么 X = W * x / w
也即 X = ( W * x / w ) * ( W / 10 ) * ( 10 / W )
也即 X = x / ( w / 10) * ( W / 10 )
在上面源碼處我們?cè)O(shè)定了 var rem = docEl.clientWidth / 10
也即rem = W / 10
則 X = x / ( w / 10) rem
我們已設(shè)計(jì)稿中屏幕像素為1080px計(jì)算呀酸，也就得出下面公式中 base-design-font-size = 1080 / 10 = 108
（太難了，別說(shuō)高等數(shù)學(xué)了琼梆，初中數(shù)學(xué)都已經(jīng)還給老師了......）
/*
*@const 根據(jù)1080p分辨率來(lái)設(shè)置比率
**/
$base-design-font-size:108px;
/*
* @Functions
* @description Strip units from $number(去掉數(shù)值后的單位)
* @param $number Include units number(含單位字符的數(shù)值)
* @return pure number(純數(shù)字)
*/
@function __strip-units($number){
@if type-of($number) == 'number'{
@return $number/($number*0 +1);
}
@warn 'Exception in method __stip-unit : Not a number value: #{$number}';
@return $number;
}
/*
* @Functions
* @description Convert the px to rem (將實(shí)際的設(shè)計(jì)尺寸px轉(zhuǎn)為相對(duì)的rem)
* @param $origLen 設(shè)計(jì)圖上的實(shí)際尺寸
* @return rem
*/
@function px2rem($origLen){
$origLen : __strip-units($origLen);
$base-design-font-size: __strip-units($base-design-font-size);
@return #{$origLen/$base-design-font-size}rem;
}
