关于适配的常用方案

由于公司最近有写官网的需求，于是我捡起了很久不用的css准备开整，针对不同设备的适配问题，用了两种常见的解决方案：

有pc端UI，但无移动端，移动端适配自己排版，这种情况下我采用的是媒体查询，通过@media实现一套html配合多套css实现适配
有完整的移动端UI，我通过rem实现的不同设备相同比例的适配

首先是媒体查询（更多用法可见MDN）：

css 复制代码

/*媒体查询的基本语法，这句代码的意思是当屏幕的最小宽度是900px的时候，使用以下的css*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

无学习成本，不过要写两套css，我先写的pc端，后要求的移动端适配，所以在pc端的基础上，加入@media，另写的一套移动端css，简而言之，你只需要根据自己的需求，对不同的屏幕适配进行处理，但这仅限于网页内容较少，如果网页内容较多，维护成本挺高，对于网页内容比较多的，我是另外开的一套，做了路由跳转。

然后是rem，这个我只做了移动端的适配，对于rem的用法@media更简单，但是理解更难一点，在前端开发中，rem（root em）是相对单位，它是相对于根元素（html元素）的字体大小来计算的，使用rem作为单位可以实现相对于根元素的自适应布局。

HTML 复制代码

<!DOCTYPE html>
<!-- 如果直接在这里写死75px，将整个页面字体大小设置为75像素的 HTML 文档的根元素，那么无论在什么是设备都是根据这个大小来计算，这是有问题的，因此需要根元素的页面字体大小动态改变，需要配合js实现。 -->
<html lang="en" style="font-size: 75px;">
<head>
    <meta charset="UTF-8">
    <!--统一视口，确保网页在移动设备上以设备宽度显示，首次加载时不进行缩放，用户无法通过手势缩放页面，并且限制用户无法放大页面。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 对于rem的转换，我用了`px to rem & rpx & vw (cssrem)` 这个插件自动帮我计算，原理也是根据根元素进行计算，如果根元素的字体大小为20px，那么1rem就等于20px，那么设置一个元素的宽度为5rem，就相当于设置它的宽度为100px（20px * 5）*/
        .box{
            width: 5rem;
            height: 5rem;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
    //这一步根据不同的屏幕大小，赋值给根元素字体大小作为rem计算的基准，一般将根元素的字体大小设置为屏幕的1/10，这样可以简化rem单位的换算
        function resetFont(){
            document.documentElement.style.fontSize = screen.width/10 + 'px'
        }
        resetFont();
        //添加一个窗口大小改变时的监听事件，在窗口大小改变时执行 resetFont 函数，实现字体大小的动态调整
        window.onresize = resetFont
    </script>
</body>
</html>

说到了rem，那么不得不提到vw，vh，他们也是响应式设计中的相对单位，两者的区别在于：

vw,vh是相对于视口宽度和高度的百分比单位。1vw等于视口宽度的1%。
适合用于根据视口宽度或高度调整元素大小，使得元素能够随着视口宽度或高度的变化而自动调整大小，适合根据视口大小调整元素大小的响应式设计。
rem是相对于根元素字体大小的单位，适合整体布局的相对尺寸设计。
rem通常用于控制整体布局比例，而vw和vh更适合用于根据视口大小调整具体元素的宽度和高度。

结合使用 rem、vw 和 vh 可以更好地控制页面的响应式布局，适应不同设备和屏幕尺寸的需求，对于简单的页面选取一种即可。

总结：

媒体查询的优缺点：

优点：

灵活性： 媒体查询允许根据设备的特征（如屏幕宽度、高度、方向等）来调整样式表，实现针对不同设备的定制化布局。
精细控制： 可以针对不同设备尺寸、分辨率等特征编写具体的样式规则，实现精细的布局调整。

缺点：

繁琐： 需要编写多个媒体查询规则来覆盖不同的设备特征，可能会增加样式表的复杂性。
维护成本高： 随着设备类型和尺寸的增多，需要维护的媒体查询规则也会增加，可能导致代码维护成本上升。

使用场景：

适用于根据设备特征动态调整页面布局和样式，实现响应式设计。

rem的优缺点：

优点：

相对单位： rem单位是相对于根元素字体大小的单位，可以方便地实现相对长度的计算，适合用于响应式设计。
易于扩展： 可以利用rem单位快速实现页面元素的缩放和响应式布局，不需要为每个媒体查询编写单独的样式规则。

缺点：

兼容性： 在一些旧版本的浏览器或设备上，对rem单位的支持可能不完善，需要考虑兼容性问题。
计算复杂： 使用rem单位时，需要计算相对于根元素字体大小的具体数值，有时可能会增加开发难度。

使用场景：

适用于整体布局的相对尺寸设计，可用于控制整体布局的比例和大小。