日期:2014-04-24  浏览次数:21182 次

文章简介:基于设计的媒体查询.

在刚一开始的时候,我们已经把特定移动设备的媒体查询运用到我们的网站上,并且服务于我们(网站),因为当时我们只是需要一种应急式的响应式设计解决方案来适应iPhone和屏幕相似的智能手机。

但是随着大量移动设备不断地被推向市场,现在是时候重新考虑使用在我们设计中的公用响应式设计断点了。为什么呢?因为原来方法重用性不高。我们也必须去改变下面讲到需要改变原来方法的理由和为什么我们要在这些特殊点上设置我们的响应式设计断点的背后积极因素。

我将会围绕“基于设计的媒体查询”展开讨论(对比于我们常见的基于移动设备的媒体查询)。这种响应式Web设计方法可以使我们网站的技术不会过时和尽可能保持跟设备平台无关性。

为什么我们的媒体查询需要去改变

我们现在使用的媒体查询一般来说都是基于目前流行手机设备的屏幕分辨率。

首先,当Web设计社区开始不断地关注响应式Web设计时, 流行的手机设备要数 iPhone 和 Android 智能手机了。

好,闲话不多说,现在就开始,应用于手机设备上的媒体查询从概念上看就好像是这样:

/* iPhone 和 其它智能手机 (portrait)