响应式网站宽度的最佳做法是什么？
What is the best practice for responsive website widths?
我最近开始学习如何使用 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 的响应式网站上找到太多信息。
我通常在 768px 处设置一个断点。
然后我进行了三个查询（到目前为止它们运行良好）：
桌面（最小宽度为 768）[sheet #1]
移动设备（最大宽度为 768）[sheet #2]
纵向（根据方向）[sheet #2]
我不认为每个人都应该使用一套严格而固定的断点，我觉得这更取决于您的网站需要什么。
不过，如果你还想看一组断点，我很久以前就把它加入了书签：ResponsiveDesign.is - breakpoints
可以用js计算HTML中的字号值，然后用CSS等框架动态计算
对我来说，您似乎很少在 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 版本，您将拥有另一个强大的工具，为特定断点设置代码的混合...让我们假设您想为 中号 尺寸（及以上）应用一些样式，您只需在 .scss 文件中使用它：
@include breakpoint(medium) {
// Your SASS/CSS code here
}
请注意我说的是 "medium and up"，那是因为 Foundation 是移动优先的，所以你放入较小断点的所有内容都将在以下大小上可用（除非你覆盖它们），如果这种理念有点对你来说很尴尬，你只需要为中的断点放一些代码，你只需要这样放代码：
@include breakpoint(medium only) {
// Your SASS/CSS code here
}
这是一种在代码中处理媒体查询的非常快速的方法，完全符合 Foundation 代码...最好的部分是什么？如果您在开发中期更改断点大小，您只需要更改 _settings.scss 文件和所有代码将在下一次构建时更新。
正如您在 "Foundation" 上标记此问题并在问题正文中提到的那样，我的回答是故意以基金会为中心的。希望这有帮助。
我最近开始学习如何使用 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 的响应式网站上找到太多信息。
我通常在 768px 处设置一个断点。 然后我进行了三个查询（到目前为止它们运行良好）：
桌面（最小宽度为 768）[sheet #1]
移动设备（最大宽度为 768）[sheet #2]
纵向（根据方向）[sheet #2]
我不认为每个人都应该使用一套严格而固定的断点，我觉得这更取决于您的网站需要什么。
不过，如果你还想看一组断点，我很久以前就把它加入了书签：ResponsiveDesign.is - breakpoints
可以用js计算HTML中的字号值，然后用CSS等框架动态计算
对我来说，您似乎很少在 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 版本，您将拥有另一个强大的工具，为特定断点设置代码的混合...让我们假设您想为 中号 尺寸（及以上）应用一些样式，您只需在 .scss 文件中使用它：
@include breakpoint(medium) {
// Your SASS/CSS code here
}
请注意我说的是 "medium and up"，那是因为 Foundation 是移动优先的，所以你放入较小断点的所有内容都将在以下大小上可用（除非你覆盖它们），如果这种理念有点对你来说很尴尬，你只需要为中的断点放一些代码，你只需要这样放代码：
@include breakpoint(medium only) {
// Your SASS/CSS code here
}
这是一种在代码中处理媒体查询的非常快速的方法，完全符合 Foundation 代码...最好的部分是什么？如果您在开发中期更改断点大小，您只需要更改 _settings.scss 文件和所有代码将在下一次构建时更新。
正如您在 "Foundation" 上标记此问题并在问题正文中提到的那样，我的回答是故意以基金会为中心的。希望这有帮助。