【移动端适配方案二 弹性布局】Flex弹性布局+rem实现移动端适配(JS+rem+viewport)

前端开发工程师根据UI设计师给的设计稿进行开发。

为了保证在各种屏幕上的不失真,就要根据实际屏幕宽度做等比例换算,才能写进CSS

实现如下:

1、设置width=device-width 也就是将layout viewport(布局视口)的宽度设置 为ideal viewport(理想视口)的宽度。
网页缩放比例为100%时,一个CSS像素就对应一个 dip(设备逻辑像素)

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

 

2、满足关系:

   写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度    

   写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度

(由于设置了理想视口,所以视口宽度=屏幕宽度,这里在比值的时候就直接用屏幕宽度)

 

3、我们将根元素基准值设置为100px

为了保持设计稿中元素按比例还原,当屏幕尺寸变了,我们就要计算出变化的比例是多少。用屏幕尺寸/设计稿尺寸得到缩放比例

缩放比例*基准值100px得到在这个屏幕尺寸下应该设置的font-size值也就是1rem的大小:即1rem=屏幕尺寸/设计稿尺寸*100px

   即:屏幕640px,给的设计稿宽640px,那么这种情况下1rem就表示100px
   如果屏幕320px,给的设计稿宽640px,那么这种情况下1rem就表示50px
   要想做成响应式,只需要配合js动态获取视口宽度,再计算好对应屏幕下html font-size的值。

4、于是:写入CSS的尺寸 = UI图标注的尺寸/100px*1rem(不明白的就把公式写在本子上,做一下简单的替换)(注意,这里的1rem代表的值是html的font-size的大小,这个大小是随着屏幕尺寸变化而改变的)

5、获取视口宽度的方法

document.documentElement.getBoundingClientRect().width

 

 

 

下面给出js更改html的font-size的代码,实际代码中就讲设计稿上的标注尺寸除以100单位改成rem就可以。

/*
设计稿的宽度:designWidth
允许自适应的最大宽度(超过这个值屏幕元素不在自适应增大):maxWidth
页面顶部加上:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" >

这段js的传入两个参数:一个为设计稿实际宽度,一个为显示的最大宽度(允许的屏幕最大宽度,用来限制屏幕过大之后元素还会自适应增大的)
例如设计稿为750,最大宽度为600,则为(750,600),屏幕大于600之后就不会自适应变大了,也相当于在用@media属性时min-width只设置到了600,没有后面的屏幕尺寸,就不会再变化了

公式:1rem = 浏览器屏幕宽(width) * 100 / 设计稿宽(designWidth)
(750,750)含义1rem = clientWidth * 100 / 750
(750,2160)含义1rem = clientWidth * 100 / 750
clientWidth是动态获取的
后面的750和2160表示maxWidth,如果浏览器窗口(clientWidth)大于这个数值就将clientWidth设置成这个数值(maxWidth)。而width是根据屏幕变化动态获取的
*/
;(function (designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
        var clientWidth = docEl.getBoundingClientRect().width;//获取document的宽度,浏览器屏幕宽度
        maxWidth = maxWidth || 540;//短路运算符,如果前面式子为false再执行后面,如果赋值了maxWidth那么maxWidth=maxWidth,否则没有赋值那么maxWidth为false,就会执行maxWidth=540
        clientWidth > maxWidth && (clientWidth = maxWidth);//短路运算符,如果前面式子true再执行后面
        var rem = clientWidth * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    refreshRem();
    //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;


    win.addEventListener("resize", function () {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    /*
    浏览器后退的时候重新计算,为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。
    如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false
    */
    win.addEventListener("pageshow", function (e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    /*
    为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢?
    因为有些浏览器默认的不是16px,或者用户修改了浏览器默认的字体大小(因浏览器分辨率大小,视力,习惯等因素)。
    如果我们将其设置为10px,一定会影响在这些浏览器上的效果,所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。
    实际项目设置成 font-size: 62.5%可能会出现问题,因为chrome不支持小于12px的字体,计算小于12px的时候,会默认取12px去计算,导致chrome的em/rem计算不准确。
    针对这个现象,可以尝试设置html字体为100px,body 修正为16px,这样 0.1rem 就是 10px,而body的字体仍然是默认大小,不影响未设置大小的元素的默认字体的大小。
    */
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";//页面元素默认16px,如果不设置将是自动为16px显示
    } else {
        doc.addEventListener("DOMContentLoaded", function (e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

 

rem方式的缺点:

dpr=1时没有任何问题,但是在dpr=2或者更高的手机屏幕上,因为物理像素的增加,存在小于1px的显示空间。如果采用第一种方法,因为它统一对scale设置为1,那么我们假如想要实现0.5px, 就只能通过transform的方式。

 

.scale{
    position: relative;

}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-right:1px solid #ddd;
    -webkit-transform:scaleX(.5);
    -webkit-transform-origin:0 0;
}

 

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值