移动端屏幕适配解决方案_显示屏尺寸与手机端不匹配-CSDN博客

本文链接：https://blog.csdn.net/baconcc/article/details/105344801

移动端屏幕适配解决方案

问题描述

问题描述

移动端开发经常遇到的一个问题是：屏幕适配—即一个尺寸可以随着屏幕大小的变化进行相应的变化。

问题展示

移动端开发时候遇到的问题是：一个div不能根据模拟器屏幕尺寸进行适当的比例缩放（如下两个截图所示）：
**div在iPhone6上的大小**
div在iPhoneX上的大小
根据上面两个截图可以看出，面对iPhone6/7/8和iPhoneX时，一个div的尺寸并没有发生任何改变，而实际情况是面对不同屏幕尺寸的变化而变化。

解决思路

应用rem。HTML中的单位有rem、em、px，其中1em=16px，em是一个相对单位，它相对于自身的font-size进行改变；rem也是一个相对单位，它相对于根元素(一般情况下是元素)进行改变。在实际场景中，可以重新设计根元素的fontsize属性的大小，然后其他元素使用rem来调节元素的适配问题。

代码实现

具体实现代码如下：

// 屏幕适配解决方案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>屏幕适配解决方案</title>
    <style>
        #rootDiv{
            width: 10rem;
            height: 10rem;
            background-color: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="rootDiv">
        屏幕适配解决方案
    </div>
    <script>
        // 获取根元素宽度，进行等分，设置根元素的fontSize属性
        var rootHtml = document.documentElement;
        var rootHtmlWidth = rootHtml.clientWidth;
        var num = 10;
        // 相当于1rem
        var myRem = rootHtmlWidth / num;  
        //设置根元素fontsize属性
        rootHtml.style.fontSize = myRem + 'px';  
        console.log('1rem大小为：'+ myRem +'px');
    </script>
</body>
</html>