如何找出适当的最小宽度和最大宽度值响应CSS？ [英] How to figure out proper min-width and max-width values for responsive CSS?
问题描述
我现在只是潜入到响应的CSS和设计，我想知道我应该如何计算出各种设备宽度。我不想花一整天测试每一个移动设备可能，我只是想获得响应布局足够的地方它的工作。
我看到一些网站使用 @media only screen和（max-device-width：xx）将其限制为非常具体的分辨率，而不是实际的浏览器窗口大小。
任何建议都是伟大的。我不是网络开发或CSS的新手，而是全新的响应式设计。
试图找出应用您的断点的位置和时间。
不是在一堆设备上测试分辨率为什么不构建响应式设计在每个分辨率都可接受？没有魔法断点为每个设备修复响应网站，因为每个响应网站会根据布局，内容等而有所不同，有大量不同的设备具有不同的分辨率。
你可能在想，到底是什么，我不会逐像素地去检查我的网站，，但这不是真的我的意思。
查找您的网站的断点：
- 跳转到浏览器，网站，然后打开控制台
- 将视口调整为非常低的分辨率。 320px是一个很好的起点。
（注意：在控制台中获取视口类型window.innerWidth的大小，请参阅资源以加强调试您的设计） - 分析您的布局。它如何看待这个决议？如果您需要在此分辨率下更改布局，则需要添加断点的时间！
- 慢慢拉伸浏览器窗口，直到出现断点或看起来很可怕。
- 响应式网页设计 - Anthony编程
- 响应式排版 li>
- 您的回应式逻辑断点设计
- 如上述视频中所述， Modernizr 是一个可帮助检测设备特定功能的真棒JS库
- Firefox 15+中的响应式设计视图功能
- Chrome的响应式设计视图教程
- 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
- 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
请注意：
响应式设计的目的不是让您的网站在所有设备上都显示良好，您的内容看起来不错 - Sam Richards
资源：
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.
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.
Finding your website's breakpoints:
Keep in mind:
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
Resources:
这篇关于如何找出适当的最小宽度和最大宽度值响应CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
