响应式Web 设计—px-em-rem三者区别及rem的使用

px—em—rem三者的区别

PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1024*768}，{1280*768}，{1920*1024}等不同的分辨率

1920*1024 前者是屏幕宽度总共有1920个像素宽度后者则是高度为1024个像素

em

1.em的值并不是固定的；

2. em会继承父级元素的字体大小。

任意浏览器的默认字体高都是16px；先看下下面的代码

下面是效果

第一个p标签继承了父元素body的font-size默认为16px则他的1em也为16px；

而第二个p标签的父级div设置fant-size为50px，在这里的p标签1em就等于50px；

rem

rem是css3中新增加的单位相对的只是HTML根元素，默认也是16px；通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应；

但是有朋友会问em跟rem有什么区别呢？

区别em是根据父元素继承相应大小而不是固定的，rem是继承html根元素的大小，

只有改变根元素html的值才能改变rem的值，

比如说一个p标签中嵌套一个span标签，p标签字体为28px；span字体为16px；

这时候若用em还需要反复计算相应px，而rem就解决了这个繁琐问题；

那么如何使用rem？

很多朋友都会说，给html设置一个font-size:62.5%;

这样一rem就是10px

这样不是不可以，但相应的也会出现一些bug；

平时我写移动端写多了也自己封装了一个rem的插件给大家分享出来

下面是代码

/*手机自适应*/(function (doc,win) {var docEl = doc.documentElement,//根元素html resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。 recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; // if(clientWidth>=560){ // clientWidth=560; //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。 // } docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; if (!doc.addEventListener) return; recalc(); win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数： //第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔 doc.addEventListener('DOMContentLoaded', recalc, false);//绑定浏览器缩放与加载时间})(document, window);

创建一个js将上面代码粘贴到其中，在页面中引入此js，然后什么都不用设置了，此时此了1rem等于100px；这样就很方便及算了；比如一般ios设计比例为750*1334；我们可以设置width:7.5rem;这样宽度就是750px；然后字体大小呢，如设计稿上标明28px，则可以设置font-size:0.28rem,随着你的手机不通宽度不同，他会相对的改变你的html根元素的大小，这时也就形成了响应式移动端，手机比例越大宽度越大，字体越大，这样就将一张页面实现不同的宽高与大小。

---