html - 响应式网站宽度的最佳做法是什么？

Question

我最近开始学习如何使用 CSS 媒体查询来开发响应式/移动友好的网站，但是，我不熟悉与确定开发设计的宽度范围相关的最佳实践。

例如，我通常使用三套CSS规则。一种用于小宽度(移动设备)，一种用于中等宽度(平板电脑或小型笔记本电脑屏幕)，一种用于大宽度(台式机)。

这是它在代码中的样子:

@media screen and (min-width: 1495px)  {    
//CSS RULES HERE
}

@media screen and (max-width: 1494px) and (min-width: 1245px) {
//CSS RULES HERE
}

@media screen and (max-width: 1244px) and (min-width: 751px) {
//CSS RULES HERE
}

我的尺寸约定(最小宽度和最大宽度)完全是任意的，我通过反复试验确定它是否有效。这通常效果不佳，我无法让设计在所有不同的屏幕分辨率下看起来都很好。

首先....是否有使用最理想宽度范围的最佳实践？

其次，是否有一个框架或模板可以让这一切变得更容易？

(那不是 Bootstrap)。

仅供引用:我使用 Foundation 6 作为网格系统，但我并没有在 Foundation 6 的响应式网站上找到太多信息。

Answer 1

对我来说，您似乎很少在 Foundation 上找到有关响应式站点的信息，这个框架从一开始就是响应式的，并且有一些很酷的东西可以帮助您解决这个问题。只是想澄清一下，我在这里谈论的是 Float Grid，自 6.4 以来它不再是默认值(但您可以在 SASS 设置中自定义或切换网格)。

Foundation Grid 有 3 个默认的预期尺寸:小(手机)、中(平板)和大(桌面)，在 Float Grid 中你可以这样使用:

<div class="column small-12 medium-6 large-4></div>

此列在移动设备上为全宽，在平板电脑上为 1/2 宽度，在桌面设备上为 1/3 宽度；您甚至可以放弃 small-12，因为默认情况下每列都有全宽(12 列)。

这就是您从网格处理它的方式...如果您使用框架的 SASS 版本，您将拥有另一个强大的工具，为特定断点设置代码的混合...假设您想要应用一些medium 尺寸(及以上)的样式，您只需在 .scss 文件中使用它:

@include breakpoint(medium) {
  // Your SASS/CSS code here
}

请注意我说的是“中等以上”，那是因为 Foundation 是移动优先的，所以你放在一个较小的断点中的所有东西，都将在以下尺寸上可用(除非你覆盖它们)，如果这种理念有点尴尬的话你，你需要为只为中间断点放一些代码，你只需要这样放代码:

@include breakpoint(medium only) {
  // Your SASS/CSS code here
}

这是一种在代码中处理媒体查询的非常快速的方法，完全符合 Foundation 代码……最好的部分是什么？如果您在开发中期更改断点大小，您只需要更改 上的大小_settings.scss 文件和所有代码将在下一次构建时更新。

当您在“基金会”上标记这个问题并在问题正文中提到时，我的回答是故意以基金会为中心的。希望这会有所帮助。