4

I'm just now diving into responsive CSS and design, and I'm wondering how I'm supposed to figure out various device widths out. I don't want to spend all day testing every single mobile device possible, I just want to get the responsive layout enough to where it works.

I saw some sites using @media only screen and (max-device-width: xx) but it seems that limits it to very specific resolutions, not actual browser window sizes.

Any advice at all would be great. I'm not new to web development or CSS, but totally new to responsive design.

4

1 回答 1

17

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

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

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

查找您网站的断点：

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

记住：

响应式设计的重点不是让您的网站在所有设备上看起来都很好，而是让您的内容在任何地方看起来都很好- Sam Richards

资源：

于 2013-05-30T18:43:10.847 回答