41

由于在网站中实现 CSS3 媒体查询的方法有很多，我想知道更有经验的网页设计师推荐哪一种。我能想到一对：

1. 多合一样式表

有一种适用于所有屏幕宽度的默认样式，以及仅适用于较低屏幕宽度并覆盖默认值的媒体查询，所有这些都在一个文件中。例如：

HTML

<link rel="stylesheet" href="main.css">

main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

（请记住，这只是一个例子）

优点：

  • 默认样式适用于旧版浏览器
  • 只需要一个 HTTP 请求

缺点：

  • 很多代码弄得乱七八糟
  • 一些浏览器将不得不下载他们不会应用的代码

2. 单独的样式表

有单独的样式表包含为每个屏幕宽度量身定制的完整代码。浏览器仅加载适用的浏览器。例如：

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

大屏幕.css

article
{
    width: 1000px;
}

小屏幕.css

article
{
    width: 700px;
}

优点：

  • 整洁有序
  • 只需要一个 HTTP 请求
  • 浏览器只加载他们需要的

缺点：

  • （这就是我犹豫要不要使用它的原因：）当一个人做出适用于所有屏幕宽度的更改时，必须将更改复制并粘贴到所有样式表中的适当位置。

3.单独的样式表，一个全局样式表

与 #1 相同，但全局样式和媒体查询位于单独的样式表中。例如：

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

main.css

article
{
    width: 1000px;
}

小屏幕.css

article
{
    width: 700px;
}

优点：

  • 也整洁和易于管理
  • 进行全局更改时没有#2的问题
  • 全局样式适用于旧版浏览器

缺点：

  • 较小的屏幕宽度需要 2 个 HTTP 请求

这就是我能想到的。应该如何管理媒体查询？

感谢您的任何回复。

4

3 回答 3

29

好吧，我当然不能声称自己是这件事的权威（我自己还在学习编码约定），但我实际上倾向于选项 #1 - 单个样式表。不过，我正在考虑它的具体实现。我建议您使用多个断点，而不是为需要新样式的每种屏幕尺寸情况设置一个断点 - 一个用于需要解决多个屏幕尺寸的每个模块的 CSS 样式。

啊……这可能是一个有点令人困惑的说法。一个例子是为了...

而不是类似的东西：

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

我建议选项＃1，只是这样实现：

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

（所有的类都是占位符。我不是很有创意......）

虽然这意味着您将多次执行相同的媒体查询声明（导致更多代码），但它对于测试单个模块更加方便，这将有助于您的网站在变得更大时的整体可维护性。尝试在我给出的示例中添加多个真实样式、更多标签/类/id，并且可能为它们添加更多空白，您很快就会看到缩小和更改/附加样式的速度有多快（跨越所有屏幕尺寸）在示例的第二部分所示的实现中。

我将这个答案完全归功于Jonathan Snook的Scalable and Modular Architecture for CSS的信息。（毕竟，像我这样的初学者是不可能自己想出并推理出这样一个答案的！）正如那本书的许多相关部分之一所引用的那样，

“......而不是在主 CSS 文件或单独的媒体查询样式表中使用单个断点，而是在模块状态周围放置媒体查询。”

不过，如果出于个人喜好或其他原因，您不想使用这种方法，那么您可以自由选择您提出的任何其他选项——毕竟，Snook 自己说他的书“更像是风格指南而不是僵化的框架"，所以不要觉得这是一个编码标准。（虽然我觉得应该是。XD）

于 2012-07-25T16:17:59.660 回答
3

我相信“把代码放在你期望的地方”。如果需要否决一种样式，我希望我的否决代码尽可能接近默认样式，因此在同一个文档中。这样，一年后，当我查看代码时，我仍然会知道发生了什么。在另一种方法（每个断点单独的 css 文件）中，我需要记住在单独的文件中查找否决样式代码。没问题，除非我忘记一年后我是这样做的。猜猜这是个人喜好，浏览器不在乎。

于 2014-02-05T17:09:45.153 回答
1

如果您想使用第二个选项，有一种方法可以避免“复制+粘贴”您的移动版和桌面版网站所需的全局样式，这非常方便，并且可以帮助您在我看来让一切更有条理，并且正在使用 SASS。

你可以有这样的东西：

> CSS Folder
> Sass folder
 - _global.scss
 - _mobile_layout.scss
 - _desktop_layout.scss
 - main_mobile.scss
 - main_desktop.scss

这将编译成

> CSS Folder
 - main_mobile.css
 - main_desktop.css

希望对你有用^^

于 2015-05-22T08:42:19.713 回答