html - CSS代码结构决定

Question

我目前正在为某个网站制作标题。此 header 由两种不同的设计组成:

float /水平标题:

+-------------------------------------------------------------------------+
|      +--------------+                       +--------------------+      |
|      |     LOGO     |                       | Menu | Menu | Menu |      |
|      +--------------+                       +--------------------+      |
+-------------------------------------------------------------------------+

居中标题:

+-------------------------------------------------------------------------+
|                          +--------------------+                         |
|                          |        LOGO        |                         | 
|                          | Menu | Menu | Menu |                         |            
|                          +--------------------+                         |
+-------------------------------------------------------------------------+

当浏览器宽度小于某个断点值时，应使用居中标题。否则水平标题。这可以通过 CSS media-queries 实现。我的问题是，header.css 文件的更好代码组织是什么:

1. 仅将两种设计的代码交集(font-family、container-width: 100% 等)与两个媒体查询一起使用。

伪代码:

/* Code necessary for both designs */

@media-query (width < breakpoint) {
  /* upgrade code to centered header */
}

@media-query (width >= breakpoint) {
 /* upgrade code to floating header */
}

1. 始终使用居中 header + media-query 覆盖必要的部分:

伪代码:

/* Code necessary for centered designs */

@media-query (width >= breakpoint) {
 /* Overwrite centered header code */
 /* Insert floating header code */
}

我的问题是这两种 css 结构的优点/缺点是什么？代码重复怎么样。第一个总是使用media-query 来显示任何有用的东西。第二个需要覆盖一些第一个居中的标题功能。

我希望这不会被关闭，因为它太主观了。我只问优点/缺点，不是选择什么设计或哪个设计更好.. .

Answer 1

基于可读性和一般 CSS 原则，我绝对不会建议您使用第一个示例。同时使用 greater than 和 less than 的想法是多余的，而且有些困惑——这相当于对一个条件执行两个 if 语句。

按降序或升序对媒体查询进行排序，将默认样式保留为最大屏幕或最小屏幕。

我个人在任何媒体查询之外定义所有全宽样式，然后在遍历样式表时使用 max-width，定义越来越小的屏幕尺寸。也就是说，相反的情况也是完全可以接受和常见的，您可以在任何媒体查询之外定义您的移动尺寸，并向下遍历增加尺寸(使用min-width ).这两种方法都创建了一个易于理解的示例 - 如果我在您之后处理此文件，我会确切地知道在哪里可以找到我正在寻找的更改。

我想说一件事应该达成共识，那就是在你的 @media 查询从来都不是一个好主意。