如何为响应式CSS找出合适的最小宽度和最大宽度值？

时间：2013-05-30 17:43:28

标签： css responsive-design media-queries breakpoints

我刚刚进入响应式CSS和设计，我想知道我应该如何计算各种设备宽度。我不想花一整天的时间来测试每一台移动设备，我只想让响应式布局足够好。

我看到一些使用@media only screen and (max-device-width: xx)的网站，但似乎将其限制为非常具体的分辨率，而不是实际的浏览器窗口大小。

任何建议都会很棒。我不是Web开发或CSS的新手，但对响应式设计来说却是全新的。

1 个答案:

答案 0 :(得分：16)

您似乎正在尝试确定应用断点的位置和时间。

为什么不在每个分辨率下构建一个可接受的响应式设计，而不是在一堆设备上测试分辨率？没有神奇的断点可以修复每个设备的响应式网站，因为每个响应式网站的布局，内容等都会有所不同，并且有大量不同的设备具有不同的分辨率。

你可能会想，“到底是什么，我不会逐像素地检查我的网站，”但这并不是我的意思。

查找您网站的断点：

  1. 跳转到浏览器，导航到您的网站，然后打开控制台
  2. 将视口调整为非常低的分辨率。 320px是一个很好的起点 （注意：要在控制台中获取视口类型window.innerWidth的大小。有关增强调试设计的更多方法，请参阅资源）
  3. 分析您的布局。它如何看待这个决议？如果您需要以此分辨率更改布局，则需要添加断点的时间！
  4. 慢慢拉伸浏览器窗口，直到出现故障或看起来很糟糕。此时，您需要插入另一个断点。
  5. 重复第4步到您心中的内容

    6. 请记住：

      

    响应式设计的目的不是让您的网站在所有设备上看起来都很好，它可以使您的内容在任何地方都显得很好 - Sam Richards

    资源：

相关问题
最新问题