本文介绍了什么是用于媒体查询的好的分辨率值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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

解决方案

查看此文章的模板320和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").

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

10-27 13:06