rem与@media 的优缺点

　　首先:   若是咱们在作单独移动端网站或者app的时候  我建议  使用 rem  ;

他能让咱们在手机各个机型的适配方面；大大减小咱们代码的重复性，是咱们的代码更兼容。

下面两个图一个调试在经常使用的机型 iPhone6 宽度是375*667  （通常的手页面的原型图为 750* ...)  另外一个是咱们最常出现问题的机型  iPhone5 由于是小机型因此比较容易出问题（错位！！！！）。

这是我使用 rem 做为单位；经过js读取屏幕的宽度  以原型图宽度为标准；进行整个页面的font-size 设置；

(function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {//大于750 按750算
                        docEl.style.fontSize = '100px';
                    } else {//小于750的按百分比缩减
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };

以750为例  浏览器读出代码为 代码中的750 可换成对应原型图的宽度  方便计算   。

 

缺点：

局限性; rem

目前ie不支持 对pc页面来说使用次数很少；

数据量大：全部的图片，盒子都须要咱们去给一个准确的值；才能保证不一样机型的适配；

@media 

应用普遍  适用于 pc端  手机页面，一般作自适应布局时  咱们比较经常使用。

几个经常使用临界点

正常编写   适用于 1200----1440的台式机

 

一、@media (max-width: 1199px)  - - - - //小于1199的设备 

 

二、@media (max-width: 991px) - - - - //小于991的设备

 

 

三、@media (max-width: 767px) - - - - //小于768的设备 

 

 这样 咱们页面就分为了4个部分   正常的台式机     笔记本    平板    手机

每一个部均可以根据本身的设计图去从新编写本身的样式

缺点：相对于代码要重复不少 ； 可能存在闪屏的问题出现 解决办法  http://blog.csdn.net/small_tu/article/details/47317453