移动端适配

無關风月

已于 2023-04-09 21:17:50 修改

阅读量130

点赞数

文章标签： css html css3

于 2023-04-09 20:59:41 首次发布

本文链接：https://blog.csdn.net/qq_45923342/article/details/130046532

版权

什么是移动端适配？

需要把握两个概念
自适应：根据不同的设备屏幕大小来自动调整尺寸和大小
响应式：会随着屏幕的实时变动而自动调整

二认识视口

1.1 视口分为三种情况

1、布局视口
2、视觉视口
3、理想视口

1.2 视口

1.2.1 布局视口

去掉meta name="viewport"这样一行

<!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"> -->
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述
布局视口实际是980px，只不过通过缩放，缩放到手机上，所以只有很小的一块box

1.2.2 视觉视口

在这里插入图片描述
手机屏幕可以看到就是视觉视口

1.2.3 理想视口

<!-- width 设置布局视口的宽度 -->
<meta name="viewport" content="width=2000px">

这样设置后，发现div更小了，说明name=“viewport” content="width=2000px"设置的是布局视口的宽度
在这里插入图片描述
所以我们可以得出，只要将width=device-width就可以得到理想视口，即布局视口等于视觉视口，让浏览器不去缩放，100px就是100px

三适配方案

这里只讲rem适配

3.1 rem适配

rem单位是相对于html的根字体的fontsize设置的，根据不同屏幕动态修改fontsize大小
在这里插入图片描述
问题1：如何自动根据屏幕大小设置根字体大小
问题2：如何计算是多少rem的值

3.2 解决方案

3.2.1 媒体查询

        @media screen and (min-width: 320px) {
            html {
                font-size: 20px;
            }
        }
        @media screen and (min-width: 375px) {
            html {
                font-size: 24px;
            }
        }
        @media screen and (min-width: 414px) {
            html {
                font-size: 28px;
            }
        }
        .box {
            width: 5rem;
            height: 5rem;
            background-color: aquamarine;
        }

在这里插入图片描述

可以看出，媒体查询确实可以生效，但是需要枚举很多，而且还是一个范围，不能及时改变

3.2.1 js动态计算

有两种计算方案
在这里插入图片描述

这里介绍第2种

比如设计师给我们375px设计图，那我们就认为根字体就是37.5px

    <script>
        const htmlEl = document.documentElement;
        function setRemUnit() {
            const htmlWidth = htmlEl.clientWidth;
            const htmlFontSize = htmlWidth / 10;
            htmlEl.style.fontSize = htmlFontSize + 'px';
        }
        setRemUnit();
        window.addEventListener('resize', setRemUnit);
    </script>

    <style>
        .box {
            width: 10rem;
            height: 10rem;
            background-color: aquamarine;
        }
    </style>

假设div宽高为375px 或者是414px
这样div 的width height 需要用 375 / 37.5 或者是414 / 37.5 计算起来比较麻烦
实际开发中，还需要借助postcss-pxtorem帮助我们实现px转rem