本文主要是對(duì)Rem介紹與小結(jié)谱邪。
學(xué)習(xí)與參考了以下文章：
Rem是什么垛贤？
Rem是一個(gè)相對(duì)單位,依照html元素的字體大小進(jìn)行比例,類似的還有em（相對(duì)與它的父級(jí)進(jìn)行比例），vh躺同、vw儒陨、vmin、vmax（相對(duì)與視窗高笋籽、寬、最小椭员、最大進(jìn)行計(jì)算）簡(jiǎn)單的來(lái)說(shuō)车海，一個(gè)視窗為100vw，1vw = 1%;
Rem我能拿來(lái)做什么隘击？
Rem適合用來(lái)制作移動(dòng)端webApp對(duì)于各種不同分辨率的適配問(wèn)題上可以選用Rem侍芝，在對(duì)各種分辨率的移動(dòng)端也可謂是完美兼容。Rem由于相對(duì)與html的字體大小進(jìn)行比例的,這樣就比百分比和em布局相對(duì)來(lái)說(shuō)更加方便了埋同。如今手機(jī)分辨率各有不同州叠，在各種手機(jī)上又不能僅僅用響應(yīng)式布局的@media來(lái)進(jìn)行適配這樣對(duì)程序員太不友好，工作量大凶赁。
Rem下如何實(shí)現(xiàn)1像素咧栗？
進(jìn)行比例的rem在設(shè)備上往往做不到1像素線條逆甜，該如何解決呢？可以通過(guò)判斷dpr的比例然后對(duì)transform的scale進(jìn)行比例的設(shè)置致板。
//stylus下制作了一個(gè)mixin
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
.border-1px{
&::after{
-webkit-transform:scaleY(0.7);
transform: scaleY(0.7);
}
}
}
為什么在頭部設(shè)置mate也做到自適應(yīng)為啥還要用REM交煞？
在一部分像素比差不多的手機(jī)上看似適應(yīng)，換到大屏高清設(shè)備上自適應(yīng)的問(wèn)題就會(huì)逐漸顯現(xiàn)斟或。如今手機(jī)型號(hào)眾多素征，屏幕像素不一罪魁禍?zhǔn)拙褪莇pr。然而之所與會(huì)自適應(yīng)是因?yàn)閂iewport它通過(guò)縮放御毅。
什么是DPI和PPI？
DPI與PPI都是表示單位英寸中像素密度端蛆。DPI主要用印刷行業(yè)每英寸的墨汁點(diǎn)，PPI主要用于屏幕欺税，指每英寸像素密度。ppi越高像素越高揭璃，圖片越清晰晚凿。
ppi對(duì)比
什么是Retine高清屏瘦馍？
在接觸淘寶flexible后會(huì)有個(gè)retine高清屏方案，Retine高清屏是dpr大于等于2的都稱為高清屏情组。
什么是像素燥筷？
想了解像素比需要先了解像素。像素分為物理像素和邏輯像素（也可以稱作css像素）院崇。物理像素是設(shè)備的像素,邏輯像素是開發(fā)者抽象出來(lái)的像素肆氓，通俗比喻一下：邏輯像素是固定的1px,你的屏幕像素多大邏輯像素就多大底瓣，但是設(shè)備的像素又不一樣大，所以就會(huì)進(jìn)行縮放或者放大捐凭。如下圖所示。上面模擬器顯示的就是邏輯像素茁肠，下面的所說(shuō)的是物理像素。為什么不一樣呢垦梆？其原因是像素比仅孩。375x667的兩倍就是1334x750惋嚎。說(shuō)明了dpr為2。
iPhone6參數(shù)
什么是像素比另伍？
像素比（dpr） = 物理像素 / 邏輯像素（CSS像素）；早期沒(méi)有這個(gè)概念温艇，當(dāng)時(shí)iphone4出了后有個(gè)叫做視網(wǎng)膜屏的時(shí)候當(dāng)時(shí)也不懂堕汞，覺(jué)得老牛了勺爱，后來(lái)知道是視網(wǎng)膜屏ppi大于320說(shuō)人眼看不到像素點(diǎn)讯检。其實(shí)也就是dpr大于等于2。
Rem兼容性人灼？
在兼容IE上面最少也要IE8以上，這樣更加證明了在做移動(dòng)端webApp上是完全不用擔(dān)心兼容的奈泪，所以現(xiàn)在rem在大多都是用來(lái)制作webApp灸芳。
如何使用Rem涝桅？
lv1：自己手動(dòng)設(shè)置html的font-size然后根據(jù)設(shè)置的大小對(duì)后面的布局進(jìn)行設(shè)置烙样，這樣過(guò)于麻煩也不能做到適配。
lv2:利用JS來(lái)獲取屏幕大小然后根據(jù)屏幕來(lái)設(shè)置html的font-size,利用js加載有弊端债蜜，屏幕會(huì)跳一下，可以使用一個(gè)londing來(lái)等屏幕加載完后在顯示，顯然這樣的效果也不是很好儒洛。
//這個(gè)代碼有缺陷也沒(méi)做兼容，主要意思還是js動(dòng)態(tài)設(shè)置html的字體大小
(function (){
size();
window.onsize = function(){
size();
}
function size(){
var winW = document.documentElement.clientWidth || document.body.clientWidth;
// 這里主要是把屏幕大小分成10份
document.documentElement.style.fontSize = winW/10 + "px";
}
})();
lv3:使用JS動(dòng)態(tài)設(shè)置html的font-size和meta卦停，給<html>元素添加data-dpr屬性向胡，并且動(dòng)態(tài)改寫data-dpr的值也就是淘寶的flexible的思想惊完。
//flexible實(shí)際上就是能過(guò)JS來(lái)動(dòng)態(tài)改寫meta標(biāo)簽，代碼類似這樣
var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
如何使用flexible拇派？
github上下載flexible然后引入。目前Flexible會(huì)將視覺(jué)稿分成100份（主要為了以后能更好的兼容vh和vw）件豌，而每一份被稱為一個(gè)單位a。同時(shí)1rem單位被認(rèn)定為10a茧彤。假設(shè)設(shè)計(jì)圖為750px。
1a = 7.5px
1rem = 75px
我想把加入購(gòu)物車按鈕用rem來(lái)設(shè)置曾掂，寬為150壁顶，高為48;rem寬為2rem高為0.64rem珠洗；
使用flexible的注意事項(xiàng)博助？
官方建議字體不要設(shè)置rem，用px來(lái)進(jìn)行設(shè)置富岳。
//官方介紹有sass和less沒(méi)有stylus，下面是stylus
//stylus設(shè)置mixin
font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] &{
font-size: $font-size * 2;
}
[data-dpr="3"] &{
font-size: $font-size * 3;
}
