请说说rem 什么是rem 为什么要用rem 怎么用？ 1.rem的就是根元素的字体大小，默认的是1rem=16px;

2.为什么我们要使用rem,是为了手机适配；

先说下rem的基本原理，假如苹果6上我需要写一个宽32px的div,我就可以写上2rem,那么在苹果6plus上我要做到自适应肯定这个32px就不仅仅是32px，所以我可以设置font-size:20px,也就是1rem=20px;那么我再苹果6上写的2rem就变成了40px了。

3通常我们在meta中设置width=device-width,就是让我们写的css代码的像素就是我们实际手机上视觉视口的像素大小一致；例如我写了宽度是320px;那么它在苹果5上展示的宽度就是全屏，因为苹果5的视觉视口就是320px;

4.但是实际操作上说，我们要把设计稿的图变成手机上显示的，并且还要做到不同手机自适应的就要考虑设计稿的单位与css单位的统一还有不同手机的设备像素比问题；

5在前端，有设备像素和css像素两个像素概念，设备像素就是固定的，就是常说的手机分辨率，常见的像ipone5的分辨率是640；6是750；css像素就是css代码中的像素；

6.说完他们两个了就要说一下dpr,这个dpr就是设备像素比；就是我们的手机分辨率除以css像素；像素比它既会被手机分辨率影响，也会被css的缩放影响；

7.先说说手机分辨率的影响方面，先控制缩放比例为1；但是不同的手机的分辨率是不一样的，例如，以前的苹果手机分辨率是320，他的视觉视口是320，也就是我们写的css代码就是320px,这时候dpr就是1，但是现在像苹果4，5的分辨率已经达到640了，我们的视觉视口还是320，这个时候他的dpr就是2了，又因为一般设计师给我们的图是按照分辨率的大小做出来的；例如以苹果6给的是750px的，他的视觉视口是375，所以设备像素比就是2，我们在切图的时候就要除以2才可以保证正确性；所以我们要考虑到手机分辨率对效果的影响；

8.上面这个是在缩放比例为1：1的情况下按照设备比换算单位，还可以通过缩放比例来适配，这样我的css375px就等于设计稿的750px了；按照这种方法，就考虑到不同的设备的像素比不一样，例如6plus就是三倍，所以这个方法只适合与2倍的像素比；所以我们也可以动态改变缩放；而缩放是1/设备像素比得到的，通过js动态修改meta标签保持所有设备的设计稿与视觉视口一致；这样就解决了我们的从设计稿到css的单位问题；但是我们还要考虑不同设备的自适应问题；这个时候我们就可以用到rem了。我在设计稿上设置rem为每个屏幕的1/10，这样6的750px就是75px,1rem=75px,5就是32px,然后设计稿上量的单位px转换为rem就是除以75就可以了。当然这个我们可以通过less编译计算；编译后的值在不同设备的比例是一致的；

6.还有第二种方法，保持缩放比例为1；在设计稿单位问题上：将苹果6设计稿的的html的font-size设为100px;1rem=100px;也就是将750/7.5得到rem值；那么在视觉视口下的375px/7.5得到rem为50px; 不管什么设备都将设计稿除以7.5得到rem;同时保持视觉视口除以7.5得到rem,这样同时除以相同的数，他们之间的设备像素比不会改变；

这样我们就可以通过Js动态监听不同设备除以7.5后的rem做到不同设备的自适应；这样的好处就是我们在设计稿上的单位就非常好换算了，100px=1rem,测量的像素直接除以100就可以了；

7这两种方法，淘宝是先通过缩放来解决手机设备像素比问题，然后通过不同屏幕的设计稿宽度/10来进行rem设置。然后动态改变不同设备的rem做到自适应；阿里的方法是通过设计稿设置固定fz=100px;以苹果6为例，就是750的fz=100px;1rem=100px;在他的视觉视口(375px)下就是fz=50px; 其他的设备，例如6plus他的设备像素比就是3，但是我把他的分辨率和视觉视口都同时除以7.5换算就可以解决手机的设备像素比问题了，而且现在你可以以100的比例换算你从设计稿上测量的像素。例如200px就是2rem就可以了

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; (function (doc, win) { var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; function recalc() { var clientWidth = docEl.clientWidth; //alert(docEl.clientHeight) if (!clientWidth) return; clientWidth=clientWidth > 750 ? 750 : clientWidth; docEl.style.fontSize = (clientWidth / 7.5) + 'px'; }; if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

rem你懂了吗