0

我目前正在为某个网站制作标题。此标头包含两种不同的设计：

浮动/水平标题：

+-------------------------------------------------------------------------+
|      +--------------+                       +--------------------+      |
|      |     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. 始终使用居中的标题 +media-query覆盖必要的部分：

伪代码：

/* Code necessary for centered designs */

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

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

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

4

1 回答 1

0

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

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

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

我想说的一件事应该是同意的，但是在你的查询中同时 min-width使用和使用都不是一个好主意。max-width@media

于 2016-10-04T17:13:06.090 回答