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作为网格系统但我在基金会6中的响应式网站上找不到相关信息。

Answer 1

在我看来，您还没有找到有关基金会上的响应式网站的信息，这个框架从一开始就一直响应，并且有很多很酷的东西来帮助您解决这个问题。我想说清楚我在这里谈论浮动网格，自6.4以来不再默认（但您可以在SASS设置中自定义或切换网格）。

基础网格有3个默认的预期尺寸：小型（手机），中型（平板电脑）和大型（桌面），在Float网格中你可以这样使用：

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

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

这就是你从网格中接近它的方式......如果你使用SASS版本的框架，你有另一个强大的工具，混合来为特定的断点设置代码......让＆＃39 ;假设你想要为中等大小（及以上）应用一些样式，你只需要在.scss文件中使用它：

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

请注意我说过＆＃34;介绍起来＆＃34;，因为Foundation是移动优先的，所以你放在一个较小的断点中的所有内容都可以使用以下大小（除非你覆盖它们）），如果那个哲学对你来说有点尴尬，并且你需要为只为中断点添加一些代码，你只需要以这种方式放置代码：

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

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

当您在＆＃34; Foundation＆＃34;上标记此问题时在问题机构中提到，我故意以基金会为中心做了我的答案。希望这会有所帮助。

Answer 2

我通常会在768px处找到一个断点。有了这个，我去了三个问题（到目前为止他们的表现相当不错）：

桌面（最小宽度为768）[表＃1]
mobile（最大宽度为768）[第2页]
肖像（根据方向）[第2页]

我认为每个人都应该使用的断点确实存在严格且固定的断点，我觉得这更多取决于您对网站的需求。

虽然，如果你还想看看一组断点，我很久以前就给它添加了书签：ResponsiveDesign.is - breakpoints

Answer 3

您可以使用js计算HTML中字体大小的值，然后使用CSS等框架动态进行计算

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

3 个答案: