响应式布局媒体查询与rem

响应式布局

随着时代，开发一个页面能够适配多个设备应用

---

1.媒体查询

媒体查询的类型分为四种：screen（屏幕） print（打印机） handheld（手持设备） all（通用）我们一般就是用screen或者all。

根据不同屏幕尺寸 背景颜色随之变化，简单明了。根据不同项目所需在不同尺寸下更改即可
下面举个简单的实例，以供参考：

   @media screen and(max-width:1024px){
        body{
            background-color: blue;
        }
        img{
            max-width: 100%;
        }
    }
    @media screen and(max-width:980px){
        body{
            background-color: blue;
        }
        img{
            max-width: 100%;
        }
    }
    @media screen and(max-width:720px){
        body{
            background-color: palevioletred;
        }
        img{
            max-width: 90%;
        }
    }
    @media screen and(max-width:640px){
        body{
            background-color: blueviolet;
        }
        img{
            max-width: 90%;
        }
    }
    @media screen and(max-width:320px){
        body{
            background-color: peru;
        }
        img{
            max-width: 90%;
        }
    }

2.百分比布局

响应式布局为了适应不同的固定宽度设计，用百分比可以针对遇到某种机型时可以较为平滑的过度
打个比方：如若按照宽度iphone和ipad的尺寸做了处理后来出现了ipadmini的尺寸 那我们的排版会不忍直视了，如果使用百分比的则会按照百分比的尺寸去平滑的过度

3.弹性图片

与百分比布局相同，图片也需要百分比来控制最大全面性的显示

 img{
            max-width: 90%;
        }

4.重新布局，显示与隐藏

分为1.同比例的缩减元素尺寸。2.调整页面的结构布局，如：导航栏pc版横着全部展示 ipad展示几个剩余更多展示 移动端就需要下拉展示了。3隐藏冗余的元素，如：搜索框可以只显示图标等
注意这里经常需要切换位置的元素可以使用绝对定位 减少重绘，提高渲染性能

小结

要注意权衡利弊，因为响应式设计确实可以实现一个页面多个设备的使用。但是由于做了适配，无论什么设备加载都会加载所有的样式及图片，这对于手机端流量使用情况不太友好。但是有减少了重复开发

二、使用相对单位rem

1.rem与em

1.rem是根据html的font-size为相对单位，有全局统一性
2.em是根据父节点的font-size为相对单位，在多重嵌套情况下使用不太友好，
下面举出rem的换算方式

  (function (doc, win) {
            // 100是缩放比例 100px为1rem 720是设计稿尺寸 
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=720){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

换算rem的方式比较多 这种比较好用哦~