媒体查询替代代码区域？

Question

我认为将没有 width/height/.. 依赖项的 default css 放在像这样的媒体查询中是个不错的主意:

@media only all and (min-width: 0px){ ... }

我是否遗漏了任何可能的缺点？

Answer 1

老实说，可读性并不好。如果我在 CSS 文件中看到它，我会认为这是一些奇怪的 CSS 黑客攻击。

另一个缺点是您添加了不必要的媒体查询。通过媒体查询设置所有默认属性可以让 CSS 编译器完成更多工作。

最后是支持。并非所有浏览器都支持媒体查询，尤其是当您在企业工作或与使用非常旧的浏览器的客户打交道时。如果您通过媒体查询设置了所有默认值，那么如果这些查询失败，您将无法轻松回退。

Answer 2

使用任何没有真正添加到您的网页的东西都不是一个好主意。

如果没有 polyfilling，不必要地使用媒体查询也会导致旧浏览器（例如 IE 7、8、9）出现问题。它还会增加页面加载时间。

还有许多其他方法可以提高可读性：

1.opening 并关闭一组 CSS 块的评论行

/******default code******/
html{
..... 
}

body{
.....
}
/****--default code--****/

中提到

Media queries as replacement for code regions?