如何为响应式 CSS 找出合适的最小宽度和最大宽度值? [英] How to figure out proper min-width and max-width values for responsive CSS?
问题描述
我刚刚开始研究响应式 CSS 和设计，我想知道我应该如何找出各种设备宽度.我不想花一整天的时间来测试每一个可能的移动设备，我只想让响应式布局足以让它发挥作用.
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.
我看到一些网站使用 @media only screen and (max-device-width: xx) 但似乎将其限制为非常具体的分辨率，而不是实际的浏览器窗口大小.
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.
任何建议都会很棒.我对 Web 开发或 CSS 并不陌生，但对响应式设计完全陌生.
Any advice at all would be great. I'm not new to web development or CSS, but totally new to responsive design.
推荐答案
您似乎想弄清楚在何处和何时应用断点.
It would seem that you're trying to figure out where and when to apply your breakpoints.
与其在一堆设备上测试分辨率，为什么不构建一个在每个分辨率下都可接受的响应式设计?没有为每个设备修复响应式网站的神奇断点，因为每个响应式网站都会因布局、内容等而异，并且有大量不同分辨率的设备.
Rather than testing resolution on a bunch of devices why not build a responsive design that is acceptable at every resolution? There are no magic breakpoints that fix responsive websites for every device because every responsive website is going to differ depending on layout, content, etc. and there are tons of different devices with varying resolutions.
您可能会想，该死的，我不会逐个像素地检查我的网站，"但这不是我的意思.
You might be thinking, "what the hell, I am not going to go pixel by pixel and check my website," but that's not really what I mean.
- 跳转到浏览器，导航到您的网站，然后打开控制台
- 将视口调整为非常低的分辨率.320px 是一个很好的起点.
(注意:要在控制台中获取视口类型 window.innerWidth 的大小.请参阅资源了解更多增强设计调试的方法) - 分析您的布局.它如何看待这个分辨率?如果您需要在此分辨率下更改布局，那么是时候添加断点了！
- 慢慢拉伸浏览器窗口，直到出现问题或看起来很糟糕.此时，您需要插入另一个断点.
- 尽情地重复第 4 步
- Jump into a browser, navigate to your website, and open the console
- Resize the viewport to a very low resolution. 320px is a good starting point.
(Note: To get the size of the viewport type window.innerWidth in console. See Resources for more ways to enhance debugging your design) - Analyze your layout. How does it look at this resolution? If you need to change the layout at this resolution then its time to add a breakpoint!
- Slowly stretch the browser window until something breaks or looks horrible. At this point you'll need to insert another breakpoint.
- Repeat step 4 to your heart's content
记住:
响应式设计的重点不是让您的网站在所有设备上都好看，而是让您的内容在任何地方都好看 - Sam Richards
The point of responsive design isn't to make your site look good on all devices, its to make your content look good anywhere - Sam Richards
资源:
- 响应式网页设计 - 与 Anthony 一起编程
- 响应式排版
- 响应式设计的逻辑断点
- 如上面的视频所述，Modernizr 是一个很棒的 JS 库，可帮助检测特定于设备的功能莉>
- Firefox 15+ 中的响应式设计视图功能
- Chrome 响应式设计视图教程莉>
Resources:
- Responsive Web Design - Programming with Anthony
- Responsive Typography
- Logical Breakpoints For Your Responsive Design
- As mentioned in the above video, Modernizr is an awesome JS library that helps in detecting device-specific features
- Responsive Design View Feature in Firefox 15+
- Responsive Design View Tutorial for Chrome
这篇关于如何为响应式 CSS 找出合适的最小宽度和最大宽度值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
