返回

移动Web开发入门(四) -- 优化版rem屏幕适配

发布时间:2022-11-26 02:32:08 263
# html# edge# scala# 设备

前言

本文主要记录了rem屏幕适配,rem屏幕适配分为两篇,上一篇介绍了简单版的rem屏幕适配,及其原理以及存在的问题,本篇将介绍优化版的rem屏幕适配,以及如何解决了1像素边框问题。

通用屏幕适配方案

通用屏幕适配方案解决了简单屏幕适配方案的1像素边框问题。

原理

在不同dpr(设备像素比)下,动态设置<meta>标签的scale(页面缩放),解决了1像素边框问题。

代码实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width,

    initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Document</title>

    <style>

        html{

            font-size: 100px;

        }

        body{

            margin: 0;

            padding: 0;

        }

        div{

            height: 1rem;

            background-color: red;

            border-bottom: 1px solid #000;

        }

    </style>

    <script>

        // dpr => scale = 1/dpr

        let viewportEl = document.querySelector('meta[name = viewport]');

        let dpr = window.devicePixelRatio || 1;

 

        dpr = dpr >= 3 ? 3: (dpr >= 2 ? 2: 1);

        document.documentElement.setAttribute('data-dpr', dpr);

 

        let scale = 1 / dpr;

        let content = 'width=device-width, initial-scale=' + scale + 'px';

 

        if(viewportEl){

            viewportEl.setAttribute('content', content);

        }else{

            viewportEl = document.createElement('meta');

            viewportEl.setAttribute('name', 'viewport');

            viewportEl.setAttribute('content', content);

            document.head.appendChild(viewportEl);

        }

        

        setRemUnit();

        window.addEventListener('resize', setRemUnit);

        function setRemUnit(){

            // 获取视口宽度

            let viewWidth = document.documentElement.getBoundingClientRect().width

            || window.innerWidth;

            // 基于设计稿 375 宽进行设置,可根据自己需要修改

            let rabtio = viewWidth / 375;

            // 设置fontSize,html的fontsize为100; 1rem = 100px

            let fontSize = rabtio * 100;

            // 修改HTML的fontsize

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

        }

    </script>

</head>

<body>

    <div></div>

</body>

</html>

HTML DOM setAttribute() 方法

例:element.setAttribute(attributename,attributevalue);

setAttribute() 方法添加指定的属性,并为其赋指定的值。

如果这个指定的属性已存在,则仅进行修改。

优化

在原有功能的基础上加了minwidth、maxwidth视口限制;

 

当视口大于maxwidth(小于minwidth)时,页面将按maxwidth(minwidth)时渲染;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,

    initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Document</title>

    <style>

        html{

            font-size: 100px;

        }

        body{

            margin: 0;

            padding: 0;

        }

        div{

            height: 1rem;

            background-color: red;

            border-bottom: 1px solid #000;

        }

    </style>

    <script>

        // dpr => scale = 1/dpr

        let viewportEl = document.querySelector('meta[name = viewport]');

        let dpr = window.devicePixelRatio || 1;

 

        let minwidth =320;

        let maxwidth =540;

 

        dpr = dpr >= 3 ? 3: (dpr >= 2 ? 2: 1);

        document.documentElement.setAttribute('data-dpr', dpr);

        document.documentElement.setAttribute('minwidth', minwidth);

        document.documentElement.setAttribute('maxwidth', maxwidth);

        

 

 

        let scale = 1 / dpr;

        let content = 'width=device-width, initial-scale=' + scale + 'px';

 

        if(viewportEl){

            viewportEl.setAttribute('content', content);

        }else{

            viewportEl = document.createElement('meta');

            viewportEl.setAttribute('name', 'viewport');

            viewportEl.setAttribute('content', content);

            document.head.appendChild(viewportEl);

        }

        setRemUnit();

        window.addEventListener('resize', setRemUnit);

        function setRemUnit(){

            // 获取视口宽度

            let viewWidth = document.documentElement.getBoundingClientRect().width

            || window.innerWidth;

 

             // minwidth、maxwidth优化

             if(maxwidth && (viewWidth / dpr > maxwidth)){

                 viewWidth = maxwidth * dpr;

             }else if(minwidth && (viewWidth / dpr < minwidth)){

                 viewWidth = minwidth * dpr;

             }

 

            // 基于设计稿 375 宽进行设置,可根据自己需要修改

            let rabtio = viewWidth / 375;

            // 设置fontSize,html的fontsize为100; 1rem = 100px

            let fontSize = rabtio * 100;

            // 修改HTML的fontsize

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

        }

    </script>

</head>

<body>

    <div></div>

</body>

 

</html>

 

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线
下一篇
HTML篇五 2022-11-26 02:10:50