在现代前端开发中，响应式设计是一项基本要求。我们需要确保网站或应用在各种设备上都能有一致的体验，包括PC、平板横竖屏切换和手机（如小米、苹果、华为）。在实现这些适配时，选择合适的单位至关重要。本文将探讨如何使用CSS适配技术，确保在不同设备上的一致体验。

相对单位与绝对单位

vw/vh 相对单位

vw: 视窗宽度单位，1vw等于视窗宽度的1%。
vh: 视窗高度单位，1vh等于视窗高度的1%。

使用vw和vh单位可以根据屏幕尺寸动态调整元素的大小，非常适合响应式设计。但是，vw在某些老旧浏览器中可能存在兼容性问题。

例如：

不支持vw单位：一些老旧浏览器，尤其是Internet Explorer 8及其更早版本，不支持vw单位。这意味着使用vw单位定义的样式在这些浏览器中不会生效。
错误的vw计算：某些较早的浏览器版本在计算vw单位时可能存在错误，导致元素的尺寸不符合预期。例如，早期版本的Internet Explorer和Safari可能会错误地计算vw单位，使得元素的宽度或高度出现偏差。
Viewport变化处理不佳：一些老旧浏览器在窗口大小变化时，可能不会正确地重新计算vw单位。这会导致在调整浏览器窗口大小后，布局不更新或更新不正确。
问题修复延迟：在一些老旧浏览器中，即使问题已经被识别并修复，用户也可能不会及时更新浏览器版本，导致兼容性问题持续存在。

px 绝对单位

px是一个绝对单位，通常用于固定尺寸的元素。尽管px可以确保精确的尺寸，但它无法根据设备屏幕大小自动调整，不适合响应式设计。

% 百分比单位

百分比单位是相对于父元素的尺寸进行调整。由于DOM层级关系复杂，使用百分比单位在一些情况下可能会产生不可预知的布局问题。

rem 单位及其应用

rem是相对于HTML根元素（通常是<html>）的字体大小来定义的单位。通过动态调整根元素的字体大小，可以实现等比例缩放，解决兼容性问题。

设置rem的步骤

动态设置根元素字体大小：在<head>标签中添加一段JavaScript代码，在DOM和CSS并发渲染之前设置好HTML的fontSize。

 <script>
    (function(){
        // 设置html fontSize
        const eleHtml = document.documentElement;
        // 屏幕的宽度
        eleHtml.style.fontSize =  window.innerWidth/10 + 'px'; 
        })
    })()
</script>

这段代码将屏幕宽度除以10，使得1rem等于屏幕宽度的十分之一。

在CSS中使用rem单位：

.col{
        width: 5rem;
        height: 100px;
        line-height: 100px;
        background-color: green;
        font-size: 50px;
    }

这样，在不同设备上，元素的尺寸会根据屏幕宽度进行等比例缩放。

移动端适配

在移动端（包括平板和手机）上，我们需要处理横竖屏切换带来的布局变化。使用vw/vh和rem单位结合，可以实现更灵活和兼容性更好的响应式设计。

vw/vh 的应用

尽管vw和vh单位在一些旧设备上可能存在兼容性问题，但在大多数现代设备上，它们是实现响应式布局的理想选择。例如：

.header {
    height: 10vh;
    width: 100vw;
}

这样，header元素的高度总是视窗高度的10%，宽度总是视窗宽度的100%。

rem 的应用

在移动端横竖屏切换时，根元素的字体大小会动态调整，确保元素的尺寸保持一致比例：

<script>
        (function(){
            // 设置html fontSize
            const eleHtml = document.documentElement;
            // 屏幕的宽度
            eleHtml.style.fontSize =  window.innerWidth/10 + 'px';
            window.addEventListener("resize",()=>{
                // console.log("resize");
                eleHtml.style.fontSize =  window.innerWidth/10 + 'px';  
            })
        })()
    </script>

我们要在添加一段代码在浏览器窗口大小发生变化时，动态调整 html 根元素的 fontSize，以确保页面布局能够根据新的窗口大小进行等比例缩放。这段代码会在窗口大小改变时重新计算并设置fontSize，确保在横竖屏切换时，布局保持一致。

可以来看下效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        (function(){
            // 设置html fontSize
            const eleHtml = document.documentElement;
            // 屏幕的宽度
            eleHtml.style.fontSize =  window.innerWidth/10 + 'px';
            window.addEventListener("resize",()=>{
                // console.log("resize");
                eleHtml.style.fontSize =  window.innerWidth/10 + 'px';  
            })
        })()
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .col{
            width: 5rem;
            height: 100px;
            line-height: 100px;
            background-color: green;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="col">123</div>
</body>
</html>

我们将.col的宽度设置为5rem，可以看下我们设置好后的效果在pc端我们缩放整个页面能做到div盒子也能等比例缩放切换成竖排换成移动端横屏竖屏都能做到展整个屏幕的一半。

结论

在实现响应式设计时，选择合适的单位是关键。vw/vh和rem单位结合使用，可以在不同设备和屏幕方向下，确保布局的一致性和兼容性。通过动态调整HTML根元素的字体大小，我们可以实现等比例缩放，为用户提供一致且优质的体验。

CSS 适配指南：实现不同设备上的一致体验