CSS 代码结构决定
CSS code structure decision
我目前正在为某个网站开发 header。这个header由两种不同的设计组成：
Floating/horizontal header:
+-------------------------------------------------------------------------+
| +--------------+ +--------------------+ |
| | LOGO | | Menu | Menu | Menu | |
| +--------------+ +--------------------+ |
+-------------------------------------------------------------------------+
居中 header:
+-------------------------------------------------------------------------+
| +--------------------+ |
| | LOGO | |
| | Menu | Menu | Menu | |
| +--------------------+ |
+-------------------------------------------------------------------------+
当浏览器宽度小于某个断点值时，应使用centered header。否则横向header。这可以通过 CSS media-queries 来实现。我的问题是 header.css 文件的更好代码组织是什么：
- 仅将两个设计（
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 */
}
- 始终使用居中 header +
media-query 覆盖必要的部分：
伪代码：
/* Code necessary for centered designs */
@media-query (width >= breakpoint) {
/* Overwrite centered header code */
/* Insert floating header code */
}
我的问题是这两个css结构的优点/缺点是什么？代码重复怎么样。第一个 always 使用 media-query 来显示任何有用的东西。第二个需要覆盖一些第一个居中的 headers 特征。
我希望这不会被关闭，因为它太主观了。我只要求 pros/cons，not 选择什么设计或哪个是 更好...
基于可读性和一般 CSS 原则，我绝对不会推荐您的第一个示例。同时使用 greater than 和 less than 的想法是多余的并且有点令人困惑 - 它相当于为一个条件执行两个 if 语句。
按降序或升序对媒体查询进行排序，将默认样式保留为最大屏幕或最小屏幕。
就个人而言，我在任何媒体查询之外定义了所有全角样式，然后在遍历样式表时使用 max-width，定义越来越小的屏幕尺寸。也就是说，相反的情况也是完全可以接受和常见的，您可以在任何媒体查询之外定义您的移动尺寸，并向下遍历 增加 尺寸（使用 min-width）。这两种方法都创建了一个易于理解的示例 - 如果我在您之后处理此文件，我会确切地知道在哪里可以找到我正在寻找的更改。
我想说的是，应该同意的一件事是在您的 @media 查询中同时使用 min-width 和 max-width从来都不是一个好主意。
我目前正在为某个网站开发 header。这个header由两种不同的设计组成：
Floating/horizontal header:
+-------------------------------------------------------------------------+
| +--------------+ +--------------------+ |
| | LOGO | | Menu | Menu | Menu | |
| +--------------+ +--------------------+ |
+-------------------------------------------------------------------------+
居中 header:
+-------------------------------------------------------------------------+
| +--------------------+ |
| | LOGO | |
| | Menu | Menu | Menu | |
| +--------------------+ |
+-------------------------------------------------------------------------+
当浏览器宽度小于某个断点值时，应使用centered header。否则横向header。这可以通过 CSS media-queries 来实现。我的问题是 header.css 文件的更好代码组织是什么：
- 仅将两个设计（
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 */
}
- 始终使用居中 header +
media-query覆盖必要的部分：
伪代码：
/* Code necessary for centered designs */
@media-query (width >= breakpoint) {
/* Overwrite centered header code */
/* Insert floating header code */
}
我的问题是这两个css结构的优点/缺点是什么？代码重复怎么样。第一个 always 使用 media-query 来显示任何有用的东西。第二个需要覆盖一些第一个居中的 headers 特征。
我希望这不会被关闭，因为它太主观了。我只要求 pros/cons，not 选择什么设计或哪个是 更好...
基于可读性和一般 CSS 原则，我绝对不会推荐您的第一个示例。同时使用 greater than 和 less than 的想法是多余的并且有点令人困惑 - 它相当于为一个条件执行两个 if 语句。
按降序或升序对媒体查询进行排序，将默认样式保留为最大屏幕或最小屏幕。
就个人而言，我在任何媒体查询之外定义了所有全角样式，然后在遍历样式表时使用 max-width，定义越来越小的屏幕尺寸。也就是说，相反的情况也是完全可以接受和常见的，您可以在任何媒体查询之外定义您的移动尺寸，并向下遍历 增加 尺寸（使用 min-width）。这两种方法都创建了一个易于理解的示例 - 如果我在您之后处理此文件，我会确切地知道在哪里可以找到我正在寻找的更改。
我想说的是，应该同意的一件事是在您的 @media 查询中同时使用 min-width 和 max-width从来都不是一个好主意。