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