2024-08-31 16:36:54
浏览数 (3)
Scss 对媒介查询的封装确实能带来 “一次封装，终生轻松” 的效果。以下是进一步阐述这种优势：
- 当你使用 Scss 封装媒介查询后，在整个项目的开发过程中，你无需反复书写复杂的媒介查询语句。无论是调整不同屏幕尺寸下的样式，还是为新的元素添加响应式规则，都可以通过调用封装好的混合宏轻松实现。
scss 代码
代码语言：javascript
复制// 定义一个名为 $breakpoints 的变量，并包含五个媒体查询的断点和对应的最小、最大宽度
$breakpoints: (
'phone': (320px, 480px),
'pad': (481px, 768px),
'notebook': (769px, 1024px),
'desktop': (1025px, 1200px),
'tv': 1201px
);
// 定义一个名为 diffTypes 的 mixin，用于创建不同类型的媒体查询
@mixin diff-types($bp) {
// 使用 if 语句判断参数 bp 是否为列表类型
@if type-of($bp) == 'list' {
// 使用 nth 函数获取列表中的第一个元素作为最小值
$min: nth($bp, 1);
// 使用 nth 函数获取列表中的第二个元素作为最大值
$max: nth($bp, 2);
// 创建一个媒体查询，当屏幕宽度在最小值和最大值之间时应用样式
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else {
// 如果不是列表，只使用最小值创建媒体查询
@media (min-width: $bp) {
@content;
}
}
}
// 定义一个名为 repod-to 的 mixin，根据传入的断点名称生成相应的媒体查询
@mixin repod-to($breakname) {
// 判断断点名称是否为 'all'
@if $breakname == 'all' {
// 如果是 'all'，遍历所有断点并生成相应的媒体查询类
@each $key, $value in $breakpoints {
$bp: $value;
// 在每个断点范围内，应用特定的样式
@include diff-types($bp) {
@content;
};
}
} @else {
// 如果不是 'all'，从映射中获取特定断点的值
$bp: map-get($breakpoints, $breakname);
// 在特定断点范围内，应用特定的样式
@include diff-types($bp) {
@content;
};
}
}
// 我们创建一个名为.header 的类
// 并使用 repod-to mixin 根据不同的断点设置其样式
.header {
@include repod-to('all') {
// 在所有断点范围内，设置.header 类的高度为 100px，宽度为 200px
height: 100px;
width: 200px;
}
}
// 创建一个名为.test 的类
// 使用 repod-to mixin 为其设置在 'phone' 断点的样式
.test {
@include repod-to('phone') {
// 在 'phone' 断点范围内，设置.test 类的文本颜色为红色
color: red;
}
}
生成css
代码语言：javascript
复制@media (min-width: 320px) and (max-width: 480px) {
.header {
height: 100px;
width: 200px;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.header {
height: 100px;
width: 200px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.header {
height: 100px;
width: 200px;
}
}
@media (min-width: 1025px) and (max-width: 1200px) {
.header {
height: 100px;
width: 200px;
}
}
@media (min-width: 1201px) {
.header {
height: 100px;
width: 200px;
}
}
@media (min-width: 320px) and (max-width: 480px) {
.test {
color: red;
}
}
