移动端布局

    viewport详解

    viewport: 视口  ,指的是浏览器中放网页内容的区域

    移动端的viewport不会自动随着设备的变化而变化,被设定为一个固定值  980 或者 1024,为了能够在移动端正常查看pc端页面.

    做移动端布局时,需要把viewport设置为随着设备的变化而变化

   

   

    参数说明:

        width :  设置视口的宽度  device-width设备宽度

        initial-scale:  页面的初始缩放比例  1.0  原始大小

        maximum-scale=1  : 最大缩放值

        minimum-scale=1  :最小缩放值

        user-scalable=no : 用户是否可缩放  一般就设置为no

        height:设置视口的高度,一般不用

3-常见移动端布局解决方案

    1)-固定布局

        将网页设置为固定的宽度,左右两边留白,布局和pc端相同

        优点: 简单,容易上手

        缺点: 大屏幕设备留白较大,体验不好

    2)-流式布局

        宽度都用百分比 ,高度固定

        优点: 能够轻松实现响应式效果

        缺点: 由于垂直方向是固定高度,所以元素会进行拉伸或者压缩,用户体验不好

    3)-响应式布局

        利用媒体查询根据不同的设备做3套或者4套代码

        优点: 根据不同的设备会有不同的布局,用户体验好

        缺点: 工作量大,代码繁杂,不便于后期维护

    4)-rem布局

      rem 单位 : 指的是 html标签的font-size

      rem布局原理: 通过js动态根据不同的设备尺寸计算一个不同的html标签的font-size值,布局的时候单位由px换算成rem  (除以100)

      步骤:

        1- viewport设置:  让网页宽度等于设备宽度

           

        2- 引入一段js动态计算html的font-size  (项目中直接引入remScale.js)

            //先获取html文档的宽度(相当于设备宽度) 

            var deviceWidth = document.documentElement.clientWidth;

            var fs = deviceWidth*100/640;  //640可以根据设计稿去调整

            // 设置htmlfont-size

            document.documentElement.style.fontSize = fs + 'px';

     完整js代码   引入项目

(function (doc, win) {

        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);

        3- 按照pc端方式正常布局,把单位换算成rem  注意图片都要设置大小