这将是很好的包装CSS样式不同的分辨率在一些CSS类使用较少。
我想做一些事情：
footer {
width: 100%;
}
.tablet {
footer {
width: 768px;
}
}
.desktop {
footer {
width: 940px;
}
}
在结束时，这样的结果应该是：
footer {
width: 100%;
}
@media screen and (min-width: 768px) {
footer {
width: 768px;
}
}
@media screen and (min-width: 992px) {
footer {
width: 940px;
}
}
.tablet可能看起来像这样：
@media screen and (min-width: 768px) {
.tablet {
}
}
希望有人有一个好主意！
解决方法
这里是我在我的项目：
@desktop: ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)";
@media @desktop {
footer {
width: 940px;
}
}
@media @tablet {
footer {
width: 768px;
}
}
这允许您只定义一次媒体查询，您可以在更少的文件中使用它。还有一点更容易阅读。 原文链接：https://www.f2er.com/css/223067.html
