目前,我正在使用@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;
}
}
最佳答案
不可以,您不能在 css 规则的声明 block 中包含媒体查询。
但是,听起来您的问题可能主要与组织比示例中包含的更多的 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;
}
}
关于css - 是否可以在一个类中为不同的屏幕尺寸使用不同的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50951854/