CSS代码结构决定

Question

我目前正在为某个网站开发一个标题。这个头由两种不同的设计：

浮动/水平标头：

+-------------------------------------------------------------------------+ 
|  +--------------+      +--------------------+  | 
|  |  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 */ 
} 

始终使用居中头+ 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）。这两种方法都创建了一个易于遵循的示例 - 如果我要在此之后处理此文件，那么我将确切知道在哪里可以找到要查找的更改。

我会说，应该在虽然同意的是，使用都min-width和max-width在@media查询是不是一个好主意一两件事。