rem与@media 的优缺点

　　首先: 如果我们在做单独移动端网站或者app的时候我建议使用 rem ;

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

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

rem与@media 的优缺点

这是我使用 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与@media 的优缺点

缺点：

局限性; rem

目前ie不支持对pc页面来讲使用次数不多；

数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；

@media

应用广泛适用于 pc端手机页面，通常做自适应布局时我们比较常用。

几个常用临界点

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

rem与@media 的优缺点

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

rem与@media 的优缺点

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

rem与@media 的优缺点

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

rem与@media 的优缺点

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

每个部都可以根据自己的设计图去重新编写自己的样式

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

秒客网

rem与@media 的优缺点

相关文章