我刚刚开始研究响应式 CSS 和设计,我想知道我应该如何找出各种设备宽度。我不想花一整天的时间来测试每一个可能的移动设备,我只想让响应式布局足以让它发挥作用。
我看到一些网站使用 @media only screen and (max-device-width: xx)
,但似乎将其限制为非常具体的分辨率,而不是实际的浏览器窗口大小。
任何建议都会很棒。我对 Web 开发或 CSS 并不陌生,但对响应式设计完全陌生。
最佳答案
似乎您正在尝试确定在何处以及何时应用断点。
与其在一堆设备上测试分辨率,为什么不构建一个在 每个 分辨率下都可接受的响应式设计?没有为每个设备修复响应式网站的神奇断点,因为每个响应式网站都会因布局、内容等而异,并且有大量不同分辨率的设备。
您可能会想,“这到底是怎么回事,我不会逐个像素地检查我的网站”,但这并不是我的意思。
查找您网站的断点:
( 注意: 要在控制台中获取视口(viewport)类型 window.innerWidth 的大小。请参阅 资源 以获取更多增强调试设计的方法)
记住:
资源:
关于css - 如何为响应式 CSS 找出合适的最小宽度和最大宽度值?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16842682/