时间戳

首页 > 解决方案 > 媒体文件使用

html - 媒体文件使用

问题描述

我正在尝试学习 Web 开发，现在我有一个问题想得到答案。在 2 个不同的 css 文件中使用媒体而不是总是使用@media 是正确的...

<link rel="stylesheet" type="text/css" media="screen and (min-width: 280px) and (max-width: 1023px)" href="../scss/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="../scss/style.css" />

这将根据您的设备加载正确的 css 文件。请告诉我这是否正确且好用。谢谢你。

标签： htmlcss

解决方案

有两种方法可以做到这一点。

  1. 创建多个 CSS 文件，每个文件都有自己的媒体类型（在示例中如何使用）
  2. 创建一个 CSS 文件并在其中放置多个 @media 声明。

人们可以争论哪个更好以及为什么更好，所以我将分别讨论一下，让你决定。

创建多个文件会降低您的网站速度，因为会发出更多 HTTP 请求。创建多个文件也很难处理，因为您必须不断切换选项卡。

创建一个文件可以加快您的网站速度，因为发出的请求更少，但如果您有大量 CSS，则可能难以使用。

您以后总是可以从一个文件切换到另一个文件，但我的建议是使用一个文件。然而，最终的选择是你的

推荐阅读