有关Rem一些问题小总结

配图与内容无关

本文主要是对Rem介绍与小结。

---

学习与参考了以下文章：

1. AlloyTeam---移动web适配利器-rem
2. w3c---使用Flexible实现手淘H5页面的终端适配
3. 移动web开发之像素和DPR
4. 慕课网碧仔---Hello，移动WEB

Rem是什么？

Rem是一个相对单位,依照html元素的字体大小进行比例,类似的还有em（相对与它的父级进行比例），vh、vw、vmin、vmax（相对与视窗高、宽、最小、最大进行计算）简单的来说，一个视窗为100vw，1vw = 1%;

Rem我能拿来做什么？

Rem适合用来制作移动端webApp对于各种不同分辨率的适配问题上可以选用Rem，在对各种分辨率的移动端也可谓是完美兼容。Rem由于相对与html的字体大小进行比例的,这样就比百分比和em布局相对来说更加方便了。如今手机分辨率各有不同，在各种手机上又不能仅仅用响应式布局的@media来进行适配这样对程序员太不友好，工作量大。

Rem下如何实现1像素？

进行比例的rem在设备上往往做不到1像素线条，该如何解决呢？可以通过判断dpr的比例然后对transform的scale进行比例的设置。

//stylus下制作了一个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);
        }
    }
}

为什么在头部设置mate也做到自适应为啥还要用REM？

在一部分像素比差不多的手机上看似适应，换到大屏高清设备上自适应的问题就会逐渐显现。如今手机型号众多，屏幕像素不一罪魁祸首就是dpr。然而之所与会自适应是因为Viewport它通过缩放。

什么是DPI和PPI？

DPI与PPI都是表示单位英寸中像素密度。DPI主要用印刷行业每英寸的墨汁点，PPI主要用于屏幕，指每英寸像素密度。ppi越高像素越高，图片越清晰。

ppi对比

什么是Retine高清屏？

在接触淘宝flexible后会有个retine高清屏方案，Retine高清屏是dpr大于等于2的都称为高清屏。

什么是像素？

想了解像素比需要先了解像素。像素分为物理像素和逻辑像素（也可以称作css像素）。物理像素是设备的像素,逻辑像素是开发者抽象出来的像素，通俗比喻一下：逻辑像素是固定的1px,你的屏幕像素多大逻辑像素就多大，但是设备的像素又不一样大，所以就会进行缩放或者放大。如下图所示。上面模拟器显示的就是逻辑像素，下面的所说的是物理像素。为什么不一样呢？其原因是像素比。375x667的两倍就是1334x750。说明了dpr为2。

iPhone6参数

什么是像素比？

像素比（dpr） = 物理像素 / 逻辑像素（CSS像素）；早期没有这个概念，当时iphone4出了后有个叫做视网膜屏的时候当时也不懂，觉得老牛了，后来知道是视网膜屏ppi大于320说人眼看不到像素点。其实也就是dpr大于等于2。

Rem兼容性？

在兼容IE上面最少也要IE8以上，这样更加证明了在做移动端webApp上是完全不用担心兼容的，所以现在rem在大多都是用来制作webApp。

Rem兼容对比图

如何使用Rem？

lv1：自己手动设置html的font-size然后根据设置的大小对后面的布局进行设置，这样过于麻烦也不能做到适配。

lv2:利用JS来获取屏幕大小然后根据屏幕来设置html的font-size,利用js加载有弊端，屏幕会跳一下，可以使用一个londing来等屏幕加载完后在显示，显然这样的效果也不是很好。

//这个代码有缺陷也没做兼容，主要意思还是js动态设置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动态设置html的font-size和meta，给元素添加data-dpr属性，并且动态改写data-dpr的值也就是淘宝的flexible的思想。

//flexible实际上就是能过JS来动态改写meta标签，代码类似这样
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会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。假设设计图为750px。

1a   = 7.5px
1rem = 75px

750的设计图

我想把加入购物车按钮用rem来设置，宽为150，高为48;rem宽为2rem高为0.64rem；

使用flexible的注意事项？

官方建议字体不要设置rem，用px来进行设置。

//官方介绍有sass和less没有stylus，下面是stylus
//stylus设置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;
    }