自适应网站页面实现

       随移动端设备的普及，移动web网站成为了前端工程师工作主攻点，诸多的手机厂商，导致每种手机机型、分辨率等手机参数相差很多，同时给前端开发人员增加了工作难度，此时手机端的适配是个不得不解决的问题。

       首先要在页面上添加这条meta标签：

       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

使页面与手机设备宽度生成一定比例。

       自适应工作原理也比较简单，将外层容器元素按照百分比铺满，容器内元素生成固定像素或百分比或左右浮动形式来进行内容填充。

    <div class="div">

        <div class="div1">div1</div>

        <div class="div2">div2</div>

    </div>

    .div{

        width:100%;

        overflow:hidden;

    }

    .div1{

        width:20%;

        height:50px;

        float:left;

    }

    .div2{

        width:50px;

        height:50px;

        float:right;

    }

       由于父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素由于采用了浮动，那么它们的位置也会固定在两端。适配方法随着迭代发展，也慢慢的被flex弹性伸缩盒子的布局方式所替代。

       除此之外，在移动端的HTML页面上不要使用绝对字体(px)，而要使用想对字体(em/rem)，对于大多数浏览器来说，通常用em = px/16换算，例如16px就等于1em。

       rem属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。

       引入一下一段js，以宽度为375的手机设备为例，将页面中'px'单位转换为'rem'，在开发者工具HBuilder中设置自动转换rem功能，就可以开始制作页面了。

    (function(doc, win){

        var docE1 = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function(){

            var clientWidth = docE1.clientWidth;

            if(!clientWidth) return;

            docE1.style.fontSize = 15 * (clientWidth / 375) + 'px';//转化为25rem

        };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt,recalc,false);

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

    })(document,window);

原创文章链接：http://www.zhicaipt.cn/hz_index/view/article_detail.html?id=44

转载于:https://my.oschina.net/u/3262647/blog/2996208