在制作响应式网站时我们应该保留哪些CSS以外的媒体查询？较小的一个或更大？

Question

我正在制作一个有3个断点768px，1024px和1900像素的网站。哪种CSS大小可以保留在媒体查询容器之外？

添加示例

媒体查询中的所有特定样式以及所有常见样式

h1 {color:red}

@media only screen and (min-width: 480px) {
h1 {font-size:18px}
}

@media only screen and (min-width: 768px) {
h1 {font-size:22px}

}

@media only screen and (min-width: 1024px) {
h1 {font-size:28px}

}

或

最常用的桌面

@media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}

}

@media only screen and (min-width: 480px) {
h1 {font-size:18px}
}

@media only screen and (min-width: 768px) {
h1 {font-size:22px; }

}

或

首先移动

@media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}

@media only screen and (min-width: 1024x) {
h1 {font-size:28px; }

}


@media only screen and (min-width: 768px) {
h1 {font-size:22px; }

}

Answer 1

我相信你的意思是问什么CSS不应该在媒体查询块中，对吗？

如果是这种情况，我建议将任何未更改的CSS放在媒体查询块之外。任何颜色，字体样式等。任何改变元素放置的CSS，填充，浮动，内联或块显示类型，任何结构类型的CSS都是我放在媒体查询块中的。

更新：要回复更新的问题，您是在询问应该将媒体块放入哪个订单？如果是这种情况，据我所知，它们的顺序并不重要。但是为了评论可能的媒体查询的数量，我会将CSS分成不同的样式表，只是为了使它更易于维护。然后，您的媒体查询将成为HTML中样式表链接的一部分。

Answer 2

有很多方法可以解决这个问题 - 根据具体情况，决定可能会有所不同。例如，是否存在您正在进行逆向工程以便响应的现有站点，或者您是从头开始的？

从SCRATCH开始

如果从头开始，一种方法是创建任何媒体查询的所有基本样式 - 这样任何设备都可以看到这些样式（特别是那些不支持媒体查询的设备）。

基本样式可能只包括颜色和字体等 - 或者它可能是除布局之外的所有内容。

然后，媒体查询用于在基本样式之上添加不同的布局。

MIN或MIN AND MAX

接下来的问题是你将如何处理不同的媒体查询...

您是否允许它们相互应用 - 在这种情况下，您可以从小开始构建 - 仅使用最小宽度。

例如：

@media only screen and (min-width: 600px)

或者您可能希望将它们设置在一系列括号中 - 这样一个尺寸的styes就不会与另一个尺寸相互作用。

例如：

@media only screen and (min-width: 600px) and (max-width: 800px)

同样，没有对错 - 两者都有优点和缺点。第一个选项允许您使用流经所有宽度的样式。第二个选项允许您完全控制以特定宽度显示的样式 - 无需处理级联。

与IE进行交易

处理旧版IE的方法有很多，包括。

1. 允许IE仅查看基本样式
2. 将媒体查询放在单独的CSS文件中，并使用媒体查询链接到这些文件...然后还通过条件注释链接到这些文件的选择（如仅限宽屏CSS文件）。
3. 使用某种JS解决方案（如respond.js或其他人）来强制IE了解媒体查询。

HTH

Answer 3

我最近阅读了许多文章，建议先从最小的分辨率开始，然后使用媒体查询向上工作。对我来说也很有意义。唯一的问题是旧浏览器（IE）不了解媒体查询。虽然有这个问题的解决方案（如果你是谷歌）。