页面响应式如何实现

1、媒体查询

@media mediatype and|not|only (media feature){

        css-code;

}

• 用@media开通 注意@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature 媒体特性，必须有小括号包含

（1）、style标签中的使用

<style>

        @media screen and (min-width:750px){

                .nav{

                        background-color:red;

                }

        }

</style>

      复合条件：

                @media screen and (max-width: 1000px) and (min-width: 500px) { .box{color:red;} }

  （2）、引入资源时使用

                <link rel="stylesheet" href="xxx.css" media="screen and (min-width:320px)"></link>

2、rem

监听屏幕变化事件,利用封装好的函数进行rem重置即可

(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){clientWidth=750}

                 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

         };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);

        doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);