时间戳

首页 > 解决方案 > 关于 CSS 媒体查询的问题

css - 关于 CSS 媒体查询的问题

问题描述

我正在尝试学习 css 中的媒体查询，我对遇到的一些示例几乎没有疑问。查询如下：

  1. .scss我已经看到在反应组件中使用的文件中以以下格式声明了一个变量：

    $screen-xs-max: ($screen-sm-min - 1);

    为什么在这里使用-1？

  2. 我的第二个问题是关于这个：

    $large-screens-up: "(min-width: #{$screen-lg-min})";

    我对这些代码行有两个问题：

    • 为什么在" ", 中声明的变量不会使变量成为字符串？

    • 为什么#在这里使用？我想这是$screen-lg-min在导入它的路径中找到变量，但我不确定它是否正确。我只是想确认这是否正确，或者如果我错了，请纠正我。

谁能帮我解决这些疑问？如果这太简单了，我很抱歉。我尝试自己获得答案，但找不到。

标签： cssmedia-queries

解决方案

在 SCSS 中

考虑$screen-sm-min:546px;将在项目或节点模块文件夹的 scss 变量文件中声明哪个。

$screen-xs-max: ($screen-sm-min - 1);表示 的值$screen-xs-max将比$screen-sm-min545px 小 1。

$large-screens-up: "(min-width: #{$screen-lg-min})";

scss中的变量可以直接使用$varible-name，

但是当你想在 scss的字符串中使用相同的变量时，你必须遵循这个

#{$variable-name}方法

为什么-1

考虑额外的小设备宽度为0 到 545px（最大值）。

考虑小设备宽度为546px(minvalue) 到 768px(maxvalue)

因此，超小设备的最大宽度将为

(min value of small devices) - 1

此方法用于避免 scss 文件中的硬编码值，

例如，如果您决定更改宽度的值，您可以只在一处更改，让公式处理剩余的宽度计算

推荐阅读