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

HK酋长 lv.1

发布时间：2022-10-02 12:44:56 312

相关标签： # html# webkit# 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）时渲染；

文章来源： https://blog.51cto.com/u_15718546/5705170

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。