Html 响应性网站宽度的最佳实践是什么？

我最近开始学习如何使用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
}

我的大小约定（最小宽度和最大宽度）完全是任意的，我通过反复试验来确定它是否有效。通常这不太好用，我不能让设计在所有不同的屏幕分辨率上都看起来很好

首先。。。。对于最理想的宽度范围是否有最佳实践

第二，是否有一个框架或模板可以使这一切变得更容易

（这不是引导）。

---

Fy:我使用基础6作为一个网格系统，但是我还没有在基础6中找到很多关于响应站点的信息。p> 我通常选择768px的一个断点。 在此基础上，我提出了三个问题（到目前为止，它们的结果非常好）：

• 桌面（最小宽度为768）[第1页]

• 移动式（最大宽度为768）[第2页]

• 肖像（根据方向）[第2页]

我不认为每个人都应该使用严格且固定的断点集，我觉得这更多地取决于你的网站需要什么

---

虽然，你仍然想看看一组断点，但我早就把它标记了：

你可以用JS来计算HTML中字体大小的值，然后使用一个框架，比如CSS来动态地进行计算。

< P>我很少见，你还没有找到关于基础上的响应站点的信息，这个框架从一开始就是响应性的，并且已经连接了一些很酷的东西来帮助您解决这个问题。我只是想澄清一下，我在这里谈论的是浮动网格，自6.4版以来，它不再是默认网格（但您可以在SASS设置中自定义或切换网格）

基金会网格有3种默认预期大小：小型（手机）、中型（平板电脑）和大型（桌面），在浮动网格中，您可以这样使用：

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

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

请注意我所说的“中、上”，这是因为基金会首先是移动的，所以你把所有的东西放在一个较小的断点上，都会有以下的大小（除非你重写它们），如果这个哲学对你来说有点尴尬，你只需要把一些代码放在中间断点上，你只需要把代码放进这样的方式：

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

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

<>这是一个处理代码中的MyMaWiSar的非常快的方法，完全与基础代码对齐…最好的部分是，如果在开发中期更改断点大小，只需更改

\u settings.scss

文件上的大小，所有代码将在下一次生成时更新

---

当你把这个问题标在“基础”上，并在问题正文中提到时，我故意以基础为中心回答。希望这有帮助。

这是一个非常有用的答案。谢谢