1

我正在研究 CSS 最佳实践和方法，如 OOCSS 和 SMACSS，以便在使用 Twitter Boostrap 3 和 LESS 的中等规模项目中使用。我开始掌握这些方法，但我很难找出如何处理响应式设计和 CSS 模块的关系。

例如，假设我有一个按钮模块，其中包含项目中使用的所有不同类型的按钮（颜色、形状、大小）。如何根据设备更改按钮。相同的按钮在移动设备中应该很大，在桌面中应该是正常的。在 OOCSS 之后，我应该有 2 个皮肤类，例如 btn--default 和 btn--large。但由于每个设备的 HTML 都是相同的，我无法在 HTML 中切换此类。此外，在模块的 CSS 中使用媒体查询会根据设备大小更改按钮的大小似乎不是一个好主意，因为我会将模块与这个特定需求结合起来（如果我想要一个普通按钮怎么办？稍后移动？）。

作为另一个示例，我有具有不同可能布局（垂直/水平）的产品部分模块。如果我想在桌面使用垂直布局而在移动设备中使用水平布局怎么办？我面临着完全相同的问题。我可以轻松创建 2 个不同的子模块（product--horiz、product-vert），但我无法更改它们。

我可以使用 javascript 来切换类，但感觉不对，并且会在禁用 JS 的情况下破坏设计。你可以告诉我，如果一个元素从一个设备到另一个设备发生如此大的变化，那么设计可能是不正确的，但限制这种情况将是一个真正的限制。

那么你对这个问题有什么看法。是否有任何普遍的做法来面对它？

4

2 回答 2

0

要将您的示例用于按钮：

移动设备也是平板电脑，平板电脑有多种视口尺寸，与台式机一样大。媒体查询不会检测触摸等功能，因此进行媒体查询仅适用于该视口大小的视觉效果。除非您使用 .touch .btn- {big styles} 之类的 js 进行特征检测，否则最好对每个设备都使用大按钮和大点击区域来显示胖手指。我使用一个小脚本来放置和放在我的 html 上，但我不会费心为 .touch 制作更大的区域。如果可能的话，我会为一切制作它们。.no-touch.touch

于 2014-10-31T19:01:19.847 回答
0

您的基本按钮样式应在“modules.scss”的按钮模块中定义。在此处应用将超越所有按钮的任何样式。然后处理 smacss 'states.scss' 文件中的差异（最后编译）。您的状态文件中应该有一个“按钮”部分，您可以在其中处理将改变按钮外观的媒体查询和唯一类。希望对您有所帮助，如果您需要，我可以详细说明。

于 2016-04-06T14:08:43.333 回答