Question

将媒体查询置于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">

我正在学习网页设计，但我有点困惑，这会很好用..

Answer 1

最简短的答案是：这取决于你想要实现的目标。

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

第二个选项（一个CSS文件，其中所有特定于媒体的规则在每个媒体类型的一个@media块下分组）是最好的，当有些规则在向来自其他@media块。在这种情况下，这比将几个单独的CSS文件下载到任何匹配的@media更加友好和经济（通过请求数量）。

当@media分类符彼此不重叠时，第三个选项是最有效的（因为它导致每页加载一个较小的文件下载，并且一次只加载一个CSS文件如果每个设备有不同布局的CSS文件，这将是最佳方式，而每个设备分辨率只需要一个 - 即一个用于水平分辨率低于320，一个用于320-720，一个用于720向上和一个专门用于印刷。

Answer 2

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

放置媒体查询的最佳方式

2 个答案: