0

在我的 CSS 文件中，许多属性对两者都是通用的，但其他属性在使用 PC 和手机浏览网页时有所不同。我用@media screen and (max-width: X px)这个——窄屏有一种行为，宽屏有另一种行为。我想到了各种解决方案：

两个单独的文件/部分

我可以将 CSS 分成两个文件，或者分成一个具有以下架构的文件：

@media screen and (max-width: X px) {
  *whole CSS code for cellphones*
}
@media screen and (min-width: X+1 px) {
  *whole CSS code for PCs*
}

这将意味着大部分代码的重复。

公共部分+特定部分

和上面类似，但是共同的部分在外面：

body {
  *common code for body*
}
*common code for divs*
@media screen and (max-width: X px) {
  body {
    *cellphone-specific code for body*
  }
  *cellphone-specific code for divs*
}
@media screen and (min-width: X+1 px) {
  body {
    *PC-specific code for body*
  }
  *PC-specific code for divs*
}

这似乎很理想：更改特定宽度和高度等常量很方便（我将所有东西放在一起，没有在整个文件中追逐常量），如果我需要更改 X 常量甚至创建一些常量，它会更方便第三版（例如，用于平板电脑）。它只有一个小缺点：似乎不可能，或者至少在我尝试时它不起作用。

特定 div 中的所有内容

这是我实际使用的：

body {
  *common code for body*
  @media screen and (max-width: X px) {
    *cellphone-specific code for body*
  }
  @media screen and (min-width: X+1 px) {
    *PC-specific code for body*
  }
}

我的问题是：什么是“最佳使用”解决方案？如果有一些困难，如何解决？

4

1 回答 1

1

如果您想要支持不支持@media 的旧版浏览器，您应该只在@media for mobile 中放置样式（假设您只会正确支持支持@media 的移动浏览器）。然后，PC 的样式应该被移动的样式覆盖。

那么，选项4？

于 2013-06-27T10:04:16.193 回答