响应式Web设计—px-em-rem三者区别及rem的使用
在css中单位长度用的最多的是px、em、rem，这三个的区别是：
- px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
- em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
- em是相对于其父元素来设置字体大小的，一般都是以
<body>的font-size为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
总之：对于em和rem的区别一句话概括：
em相对于父元素，rem相对于根元素。
<meta name="viewport" content="width=device-widht,initial-scale=1.0,user-scalable=1.0,maximum-scale=1.0,minimum-scale=1.0">
明白一个浏览器默认行为。
试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如：safari iphone：980px;opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。
meta标签中，width有两个含义，第一、width为phys.width，第二，width也为虚拟窗口的width。这样就会有两个结果：
此时的iPhone6的phys.width也变成了css-width即375px，我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。
如你设计的是375px的手机端页面，此时的虚拟窗口的宽度也为375px，再装进phys.width为375px的手机，当然如设计稿一样的效果，不会缩放，也不会出现横向滚动条。
user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了
要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：
<meta name="viewport" content="width=device-width, initial-scale=1">
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
