CSS：使用媒体查询进行网页元素的缩放_css 媒体查询等比列缩放怎么做-CSDN博客

本文链接：https://blog.csdn.net/m0_55944058/article/details/121342418

使用媒体查询的目的：能够在不同宽度的设备中使网页元素实现等比例缩放效果。

1、基本原理

通过媒体查询@media （）{} 对不同宽度的屏幕尺寸设置不同的根标签字号大小，在为网页元素设置宽高等尺寸的时候使用一种与根字号大小相关的相对单位rem，从而达到不同宽度设备屏幕上网页元素等比例缩放效果。

2、rem介绍

rem是一种相对单位，1rem代表一个网页根标签（html标签）的字符大小。html标签字符大小通过以下代码来改变。一般设置根标签字符大小为1/10屏幕宽度。

html {
     font-size: 41.4px;
     }

3、媒体查询的基本使用

通过媒体查询为主要的多种屏幕宽度（例如375px、414px等）设置网页根标签字符大小（37.5px、41.4px）。



/*媒体查询屏幕是否为414px*/
/*如果屏幕是414px，则更改html标签的字号为41.4px*/
@media (width=414px) {
    html {
        font-size: 41.4px;
    }
}

@media (width=375px){
    html {
        font-size: 37.5px;
    }
}

举例：使用rem单位使盒子在375px屏幕宽度上大小为68px*29px

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        * {
            margin: 0;
            padding: 0;
        }

        /* 需求:使用rem单位使盒子在375px屏幕宽度上大小为68px*29px */
        .box {
            /* 68/37.5=1.81333 */
            /* 29/37.5=0.77333 */
            width: 1.81333rem;
            height: 0.7733rem;
            background-color: orange;
        }

        @media (width=375px){
            html {
                font-size: 37.5px;
            }
        }

        @media (width=414px){
            html {
                font-size: 41.4px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

4、链入flexible.js的方法来进行移动适配

使用媒体查询的方法确实能够使网页元素根据不同的视口宽度来进行等比例缩放，但是弊端就是每有一个新的屏幕宽度就需要添加一个媒体查询，如今移动设备的发展日新月异，需要能够有一种使网页元素自动根据屏幕宽度进行缩放的方法。手淘开源了flexible.js文件，我们只需将flexible.js链入html中即可完成。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        * {
            margin: 0;
            padding: 0;
        }

        /* 需求:使用rem单位使盒子在375px屏幕宽度上大小为68px*29px */
        .box {

            width: 1.81333rem;
            height: 0.7733rem;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script src="./js/flexible.js"></script>
</body>
</html>