放置媒体查询的最佳方式[关闭]答案

【问题标题】：Best Way To Place Media Queries [closed]放置媒体查询的最佳方式[关闭]
【发布时间】：2019-07-18 02:13:20
【问题描述】：

在 HTML 中放置媒体查询的最佳方式是什么？

在同一个 CSS 文件中：

.my-text {
  font-size: 30px;
}

@media only screen and (max-width : 768px) {
   .my-text {
     font-size: 24px;
    }
}

.my-img {
  width: 100%;
}

@media only screen and (max-width : 768px) {
   .my-img {
     width: 80%;
    }
}

{more styles...}

@media only screen and (max-width : 768px) {
   {more styles...}
}

或在相同的 CSS 中，但喜欢：

.my-text {
  font-size: 30px;
}

.my-img {
  width: 100%;
}

{more code....}

@media only screen and (max-width : 768px) {
   .my-text {
     font-size: 24px;
    }

   .my-img {
     width: 80%;
    }

    {more code...}
}

或者我应该使用媒体查询在 HTML 头标签中使用不同的样式表，例如：

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="small.css">

我正在学习网页设计，但我有点困惑，哪种方法可以正常工作..

【问题讨论】：

当然，我会建议你使用第二种或第三种方式。这仅取决于您的习惯。但我认为第三种选择是最清楚的。
我认为这个问题是基于意见的，因此off topic.
只是为了权衡一下，如果我不得不以“第三种方式”从事项目，我会很生气。尝试之后，您很快就会发现您需要查看响应式布局的进展 - 都在一个地方。这完全基于意见 - 所以你不会得到答案，但我想大多数人在 2017 年使用 SCSS 或 Stylus - 他们使用 1 和 2 的组合。codepen.io/sheriffderek/pen/50fe2e2fd5c0dda47007431dec2ca2e3

标签： html css responsive-design media-queries

【解决方案1】：

最短的答案是：这取决于您要达到的目标。

第一个选项在文件大小和可读性方面最差，因为将每个 @media 规则加倍会使所有规则变长且难以有效调试。

第二个选项（一个 CSS 文件，其中所有媒体特定的规则分组在每个媒体类型的一个 @media 块下）是最好的，当有规则相互重叠时，向来自另一个 @ 的值添加一些东西987654323@ 块。在这种情况下，这将比将多个单独的 CSS 文件下载到任何匹配的 @media 更适合 SEO 和经济（通过请求数量）。

当@media 分类器完全不相互重叠时，第三个选项最有效（因为它会导致每次页面加载时下载的文件更小，并且一次只加载一个 CSS 文件。这个如果您有一些用于每个设备不同布局的 CSS 文件，这将是最好的方法，而每个设备分辨率只需要一个 - 即一个用于 320 以下的水平分辨率，一个用于 320-720，一个用于 720 以上，一个专门用于打印。

【讨论】：

【解决方案2】：

第二个选项将是最佳实践，因为我看到优秀的设计师使用第二个策略来实现媒体查询。首先，编写所有样式，然后在最后对所需的任何元素使用媒体查询。

【讨论】：