前端大屏项目适配：使用 SCSS 实现响应式布局

在前端开发中，大屏适配是一个常见的需求，尤其是在开发数据可视化大屏或企业级应用时。由于大屏的显示设备尺寸和分辨率差异较大，如何确保页面在不同设备上都能完美显示是一个重要的问题。本文将详细介绍如何使用 SCSS 的 math 函数和自定义函数来实现大屏的响应式适配，并通过代码示例说明其具体实现。

为什么使用 SCSS 和响应式单位？

在大屏开发中，我们通常会基于设计稿进行开发。设计稿的尺寸通常是固定的（例如 1920×1080），但实际显示设备的尺寸和分辨率可能千差万别。为了确保页面在不同设备上都能正确显示，我们需要将设计稿中的像素单位（px）转换为响应式单位（如 vw 和 vh）。

• vw（视口宽度的百分比）：1vw 等于视口宽度的 1%。

• vh（视口高度的百分比）：1vh 等于视口高度的 1%。

通过将设计稿中的 px 单位转换为 vw 和 vh，我们可以实现页面的自适应布局。SCSS 提供了强大的功能，可以方便地实现这种转换。

如何使用 SCSS 实现大屏适配？

1. 定义设计稿尺寸

首先，我们需要定义设计稿的宽度和高度。假设设计稿的尺寸为 1920×1080：（之前UI同事的设计稿）

// 默认设计稿的宽度和高度
$designWidth: 1920;
$designHeight: 1080;复制

2. 使用 SCSS 的 math 函数

SCSS 提供了内置的 math 模块，可以方便地进行数学运算。我们可以通过 @use "sass:math" 来引入这个模块：

@use "sass:math";复制

3. 定义转换函数

为了将设计稿中的 px 单位转换为 vw 和 vh，我们需要定义两个函数：vw($px) 和 vh($px)。

// px 转为 vw 的函数
@function vw($px) {
    @return math.div($px, $designWidth) * 100vw;
}
 
// px 转为 vh 的函数
@function vh($px) {
    @return math.div($px, $designHeight) * 100vh;
}复制

4. 使用转换函数

在实际的样式中，我们可以直接使用这些函数来实现响应式布局。例如：

.container {
    width: vw(1200); // 设计稿中宽度为 1200px
    height: vh(720); // 设计稿中高度为 720px
    padding: vw(20) vh(20); // 设计稿中内边距为 20px
    background-color: #000;
    color: #fff;
    font-size: vw(24); // 设计稿中字体大小为 24px
}复制

5. 完整代码示例

以下是一个完整的 SCSS 示例，展示如何使用这些函数实现大屏适配：(因为要全局使用，所以我提出来写了

utils.scss文件

// 使用scss的math函数
@use "sass:math";
 
// 默认设计稿的宽度
$designWidth:1920;
// 默认设计稿的高度
$designHeight:1080;
 
// px转为vw的函数
@function vw($px){
    @return ($px / $designWidth) * 100vw;
    // @return math.div($px,$designWidth) * 100vw;
}
 
// px转为vh的函数
@function vh($px){
    @return ($px / $designHeight) * 100vh;
}复制

main.js文件

@import '@/css/utils.scss';复制

其他文件里使用：

// 地图左边
.map-left-box {
  width: vw(460);
  position: absolute;
  left: vw(10);
  top: vh(80);
  z-index: 10;
  height: vh(980);
}
// 地图右边
.map-right-box {
  width: vw(460);
  position: absolute;
  right: vw(10);
  top: vh(80);
  z-index: 10;
  height: vh(980);
}复制

为什么使用这种方法？

1. 灵活性：通过 SCSS 的函数，我们可以轻松地将设计稿中的 px 单位转换为响应式单位，而无需手动计算。

2. 可维护性：如果设计稿的尺寸发生变化，我们只需要修改 $designWidth 和 $designHeight，而无需修改具体的样式代码。

3. 兼容性：使用 vw 和 vh 单位可以确保页面在不同设备上都能正确显示，无论设备的分辨率如何。

4. 性能：这种方法不会增加额外的 JavaScript 计算，完全依赖于 CSS，性能更高。

5. 注意：最小视口限制：在某些情况下，视口可能非常小（如移动设备），这可能导致元素过大。可以通过 @media 查询设置最小视口限制：

   @media (max-width: 768px) {
       .container {
           width: 100vw;
           height: auto;
       }
   }复制

   字体大小限制：对于字体大小，建议使用 clamp() 函数，确保字体在不同设备上都能保持可读性：

   .title {
       font-size: clamp(16px, vw(48), 64px);
   }复制

6. 测试：在开发过程中，务必在不同设备和分辨率下测试页面的显示效果，确保适配效果良好。

   总结

   通过 SCSS 的 math 函数和自定义的 vw 和 vh 转换函数，我们可以轻松实现大屏的响应式适配。这种方法不仅灵活、可维护性强，还能确保页面在不同设备上都能完美显示。希望本文的介绍和代码示例能帮助你在前端大屏开发中更好地实现适配效果。