从html表调用css文件最快的是什么[关闭]答案

【问题标题】：What is Fastest to call the css file from html sheet [closed]从html表调用css文件最快的是什么[关闭]
【发布时间】：2020-07-15 09:50:31
【问题描述】：

从 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) {}

【问题讨论】：

这两种方法我都试过了，一切都很好，我只想知道最好用的一种
这些相似，但功能不同，因此没有“最佳”方法。这取决于您的情况和目标。
我会说，这取决于您的需求。如果屏幕尺寸之间的 CSS 真的有很大差异，则 (1) 可能会更好。但我认为在大多数情况下（2）被使用并将被使用。我唯一一次将media 与两个 CSS 文件一起使用是当我将一个 CSS 文件专用于打印 media="print"
我尝试了这两种方法，并没有很快发现太大的区别第二种方法在更改浏览器大小时快一点，但是从iPhone 5 320px不同屏幕的大小打开时和galaxy 375px 例如我注意到第一种方法更快

标签： html css media stylesheet screen-size

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

不确定您需要将 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。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：