gpt4 book ai didi

css - 在元素中嵌套@media 规则

转载 作者:太空宇宙 更新时间:2023-11-04 09:10:24 25 4
gpt4 key购买 nike

分别为每个嵌套@media规则是一个好习惯还是创建@media并嵌套所有类更好里面?
哪种方法在加载页面的速度方面更有效?

/* 
* Sass or Less
*/

/* example_1 */
.class1 {
width: 100%;

@media screen and (min-width: 740px) {
width: 50%;
}
}

/* example_2 */
.class1 {
width: 100%;
}

.class2 {
color: #000;
}

@media screen and (min-width: 740px) {
.class1 {
width: 50%;
}

.class2 {
color: #faa;
}
}

最佳答案

我认为这取决于您要编写的代码量。它工作没有任何问题,但每个类中嵌套的数百个不同的媒体查询可能难以维护。在我看来,一个好的做法,尤其是对于大型元素,是为每个媒体查询阈值使用单独的文件,以尽可能保持 CSS 的组织性。例如:

style.less

.class1 {
width: 100%;
}

.class2 {
color: #000;
}

@media screen and (min-width: 740px) {
@import "min740.less";
}

min740.less

.class1 {
width: 50%;
}

.class2 {
color: #faa;
}

如果您打算编写单独的组件,例如按钮或排版,您可以将所有相关的媒体查询保存在同一个文件中,以便拥有一个完全独立的 CSS 模块(基本上是您的第二个示例)。

就速度和性能而言,显然始终建议在生产中使用编译的 LESS,但考虑到您的示例,单个媒体查询选择器会更有效,因为在“example1 方式”中,媒体查询选择器将被复制多次:

.class1 {
width: 100%;
}
@media screen and (min-width: 740px) {
.class1 {
width: 50%;
}
}
.class2 {
width: 100%;
}
@media screen and (min-width: 740px) {
.class2 {
width: 50%;
}
}

关于css - 在元素中嵌套@media 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42167163/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com