是否可以在一个类中针对不同的屏幕大小使用不同的CSS
是否可以在一个类中针对不同的屏幕大小使用不同的CSS
提问于 2018-06-20 23:27:00
目前，我正在使用@media为不同的屏幕尺寸定义不同的CSS
@media (max-width: 1800){
body{
font-size: 14px;
}
}
@media (min-width: 1800){
body{
font-size: 16px;
}
}当我进行更改时，我在确保更新两个分辨率的CSS时遇到了问题，因为它们彼此之间距离很远。
有没有办法将屏幕大小内部化到类内部？
即：
body{
@media (max-width: 1800){
font-size: 14px;
}
@media (min-width: 1800){
font-size: 16px;
}
}回答 1
Stack Overflow用户
发布于 2018-06-21 04:45:42
不能，您不能在css规则的声明块中包含媒体查询。
但是，听起来您的问题可能主要与组织比示例中包含的更多css有关，以简化对特定选择器进行更改的过程。如果是这种情况，那么对同一断点使用多个媒体查询可能会有所帮助。这可能会帮助您组织css以简化维护(更紧密地定位相关的css规则)，但由于重复的@media规则，它确实会增加代码的膨胀(膨胀是否是简化维护过程的合理权衡取决于您)。
例如：
/* body styles */
body {
font-size: 14px;
}
@media all and (min-width: 1800px) {
/* body styles for 1800px and above */
body {
font-size: 16px;
}
}
/* h1 styles */
h1 {
font-size: 24px;
}
@media all and (min-width: 1800px) {
/* h1 styles for the same media breakpoint as above */
h1 {
font-size: 36px;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50951854
复制相关文章
相似问题
腾讯云开发者
