乐趣区

关于前端:自适应网站页面适配实现和基本原理讲解

jiezi

随挪动端设施的遍及，挪动 web 网站成为了前端工程师工作主攻点

诸多的手机厂商，导致每种手机机型、分辨率等手机参数相差很多，同时给前端开发人员减少了工作难度

此时手机端的适配是个不得不解决的问题

上面介绍一下网站适配的实现及原理是如何操作的

首先要在 html 页面中增加适配 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’

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

原创文章链接:https://www.toutiao.com/i6881889214640685571/

退出移动版