Question

在我的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*
  }
}

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

Answer 1

如果您希望支持不支持@media的旧版浏览器，则只应在@media for mobile中放置样式（假设您只能正确支持支持@media的移动浏览器）。然后，只需通过移动设备样式覆盖PC的样式。

那么，选项4？

将CSS DIV代码分成PC和手机部分

1 个答案: