rem你懂了吗

请说说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);