scss 中的媒体查询

明乐er

已于 2024-01-29 14:35:12 修改

阅读量588

点赞数 8

分类专栏： CSS 文章标签： scss 媒体前端

于 2024-01-09 19:52:28 首次发布

由于博主技术有限，如有描述错误或者不准确的，请联系博主进行变更！原创不易，且行且珍惜！

本文链接：https://blog.youkuaiyun.com/qq_35021522/article/details/135488534

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在移动端使用rem单位进行适配，推荐了PostCSS插件pxtorem和lib-flexible工具，并提供了根据不同设计稿尺寸配置的方法和示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心代码

$screen-xs: 480px !default;
$screen-xs-min: $screen-xs !default;

// Small screen
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;

// Medium screen
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;

// Large screen
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;

// 2k
$screen-2k: 1920px !default;
$screen-2k-min: $screen-2k !default;

// 3k
$screen-3k: 2880px !default;
$screen-3k-min: $screen-3k !default;

// 4k
$screen-4k: 3840px !default;
$screen-4k-min: $screen-4k !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
$screen-lg-max: ($screen-2k-min - 1) !default;
$screen-2k-max: ($screen-3k-min - 1) !default;
$screen-3k-max: ($screen-4k-min - 1) !default;

@media (max-width: $screen-xs-max) {
   width: 100%;
   margin-right: 0;
 }
 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
   width: calc(100% / 2 - 6px);

   &:nth-of-type(2n) {
     margin-right: 0;
   }
 }
 @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
   width: calc(100% / 3 - 8px);

   &:nth-of-type(3n) {
     margin-right: 0;
   }
 }
 @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
   width: calc(100% / 4 - 9px);

   &:nth-of-type(4n) {
     margin-right: 0;
   }
 }
 @media (min-width: $screen-2k-min) and (max-width: $screen-2k-max) {
   width: calc(100% / 6 - 10px);

   &:nth-of-type(6n) {
     margin-right: 0;
   }
 }
 @media (min-width: $screen-3k-min) and (max-width: $screen-3k-max) {
   width: calc(100% / 8 - 10.5px);

   &:nth-of-type(8n) {
     margin-right: 0;
   }
 }
 @media (min-width: $screen-4k-min) {
   width: calc(100% / 10 - 10.8px);

   &:nth-of-type(10n) {
     margin-right: 0;
   }
 }

移动端Rem 布局适配

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
- GitHub链接
- NPM链接
lib-flexible 用于设置 rem 基准值
- GitHub链接
- NPM链接

1、设计稿尺寸为375时

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

2、设计稿尺寸不为375时

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};