从 html sheet 调用 css 文件最快的是什么

Question

从 HTML 文件调用 CSS 文件的最佳方法是什么？我面临着许多可能性，并且没有最好的经验可能的可能性

1 -

        <link rel="stylesheet" media="screen and (max-width: 600px)" href="css/screen600.css">
        <link rel="stylesheet" media="screen and (max-height: 400px) and (max-width: 600px)" href="css/screen600x400.css">`

2 -

@media only screen and (max-width: px) {}

Answer 1

在我看来，你应该使用一个 css 文件，在你的 html 中使用外部方法，使用 <link> 标签，（ <link rel="stylesheet" type="text/css" href="style.css"> ）并把你的所有屏幕尺寸的媒体查询。

您的 css 文件将包含很多代码，但很容易从一个尺寸导航到另一个尺寸，而不是打开更多 css 文件以在特定屏幕宽度上更改某些内容。

Answer 2

在第一个示例中，通过将媒体查询添加到您的 HTML，您将仅下载与该媒体查询 media="screen and (max-width: 600px)" 匹配的文件。（在你的例子中，一些用户会下载两个 CSS 文件，这些文件是渲染阻塞资源，会延迟页面渲染）

将媒体查询放在 CSS（第二个示例）中，您将始终下载该文件，然后浏览器将决定是否应用这些样式。因此，您下载的 CSS 可能会比您使用的更多。

所以没有单一的正确答案，但我相信第二种方法是最常见的，因为它更容易维护。

Answer 3

我不确定您是否需要将 css 调用到 html

的细节

如果您已经有一个文件，例如：stylesheet.css，并且您希望将其包含到您的 HTML 文件中，您需要做的就是打开您的 HTML 文件，转到页眉区域并执行此操作；

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>

所以例如：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

我通常这样做，并在 CSS 中完成我所有的额外定义。从屏幕到你有什么。这使得“关注点分离”变得容易，因此您不必返回 HTML 和 CSS 只是为了更改屏幕尺寸、添加甚至删除。

我希望这能回答您的问题。如果不让我知道，我可能只需要理解并给出正确的答案。

从 html sheet 调用 css 文件最快的是什么

What is Fastest to call the css file from html sheet

html

css

media

stylesheet

screen-size