Question

在HTML中加载媒体查询“@media”是否更好，如此

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

或在CSS样式表本身内部？

@media (max-width: 800px) {
...
}

据我所知，两者都会加载，但只有在条件适用时才会激活。有没有更快和/或更好的？

编辑：我想为我的网站制作一个全局样式表，并考虑在不同样式表中为不同页面分隔样式，并想知道哪一个具有更快的加载时间（使用html或css样式表中的媒体）< / p>

Answer 1

保持@media在CSS中总是好的。

在HTML中使用您还可以为不同的媒体使用不同的样式表：

Answer 2

也许您正在尝试查看内部和外部CSS样式表之间的区别

内部CSS样式表

<head>
   <style type="text/css">
    @media (max-width: 800px) {
    ...
    }
   </style>
 </head>

外部CSS样式表

 <head>
  <link rel="stylesheet" type="text/css" href="/support/style.css" />
 </head>

创建网站时应考虑内部和外部CSS。因此，它会影响您的网页速度。

您可能需要阅读googleinsight的建议：

Answer 3

CSS纯粹基于代码可维护性和强大的实现。想象一下，如果你想要做以下事情：

@media (max-width:768px) {
    .bob{}
}

对于40个带有bob类的元素 - 在样式表之外，这将是非常糟糕的处理。