我想知道以下声明媒体查询的方法是否有任何主要优点/缺点。
似乎有三种主要方式 - 这有什么原因吗？有什么区别？
<link type="text/css" rel="stylesheet" media="screen and (max-width:320px)" href="mobile.css">
与
@import
与
@media (within css file)
目前我使用link rel技术，但有兴趣知道特别是CSS文件中的@media是否更有效率或更好的做法。
提前致谢
答案 0 :(得分：2)
前两个方法会导致额外的HTTP请求加载另一个文件;最终方法包括单个文件中的所有变体。
这在很大程度上取决于您希望如何组织CSS以及CSS在不同媒体查询中的差异。如果您在单独的文件中更容易处理它，并且您没有在部署之前自动将它们组合到单个文件中的构建过程，那么前两种方法是合适的。
如果要直接引用每个文件，并且要在HTML中查看媒体查询，请使用HTML版本。如果您有一个包装CSS文件，可以使用@import版本，该文件将在当前媒体的相应CSS中调用，并且您不希望HTML与各种调用混杂在一起。在这两种情况下，特定于媒体的样式表都将作为单独的HTTP请求加载。
如果您将所有CSS放在一个文件中，或者如果您有多个文件但使用构建工具将它们合并为一个文件，请使用最终方法。
答案 1 :(得分：2)
这个page声明正确的答案是：
通过@media
@media all and (min-width: 480px) {…}
这是最流行的方法，它通常可以正常使用。
但有时需要拆分大的CSS文件并将手机，平板电脑和桌面的CSS规则提取到单独的文件中。在这种情况下，以下方式是合理的......
包含在HTML页面中作为链接
<link rel="stylesheet" href="tablet.css" media="all and (min-width: 480px)" />
通过@import
@import url("tablet.css") all and (min-width: 480px);
请注意如果增加包含文件的数量，则会增加对服务器和服务器负载的请求数量。 所以明智地使用这种可能性。