什么是用于媒体查询的好的分辨率值？ [英] What are good resolution values to use with media queries?

问题描述

最近我一直在使用CSS媒体查询，因为它是一个伟大的方式，使我的网站适应各种屏幕尺寸。

我的问题是：布局是否有任何推荐的分辨率值？

解决方案

查看此文章的模板320和Up - 由 Andy Clarke ，它被许多开发人员和设计师使用： http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

如果向下滚动到媒体查询部分，您将看到他们使用五个CSS3媒体查询增量（480，600，768，992和1382px）。通常我坚持只有4（480，600，768，1024）。

要说明范围：

min-width：480px ：将以横向模式并向上定位移动设备

min-width：600px ：纵向模式及以上

min-width：768px ：以横向模式b
$ b

min-width：1024px ：定位桌面视图

我将在开始时使用我的移动纵向视图CSS（因此，术语320及以上）。

Recently I've been playing around with CSS Media Queries because it's a great way to make my website adapt to various screen sizes. I am planning to implement them into the live version.

My question is: Are there any recommended resolution values at which the layout changes?

解决方案

See this article for a template '320 and Up' - by Andy Clarke, it's used by many developers and designers: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

If you scroll down to the media queries section you'll see they use five CSS3 Media Query increments (480, 600, 768, 992 and 1382px). Typically I stick to just 4 (480, 600, 768, 1024).

To explain the ranges:

min-width: 480px: Will target mobile devices in landscape mode and up

min-width: 600px: Targets tablets in portrait mode and up

min-width: 768px: Targets tablets in landscape mode and up

min-width: 1024px: Targets the desktop view

And typically I will have my mobile portrait view CSS at the very beginning (hence the term "320 and up").

这篇关于什么是用于媒体查询的好的分辨率值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！