媒体查询以定位大部分智能手机

Question

我写了一些CSS代码,使HTML页面更适合移动浏览器.为了确保我的CSS仅适用于手机,我使用以下媒体查询:

@media only screen and (max-device-width: 480px)

作为一名iPhone开发人员,我在这台设备上进行了测试,效果非常好.但我希望我的CSS可用于所有类型的设备(Android,Windows Phone等).

什么是适合当今大多数智能手机的好分辨率？或者我需要更复杂的媒体查询？

Answer 1

最近我开始使用响应式网页设计和媒体查询,我没有找到一个独特的"神奇"查询,但在阅读了很多文章和几本书后,我采用了Mobile First方式来开发网页,我正在使用一些常见的媒体查询,这里是断点:

• 320 px移动人像
• 480 px移动版景观
• 600 px小平板电脑
• 768 px平板电脑肖像
• 1024 px平板电脑风景/上网本
• 1280像素及更高 - 桌面

(摘自http://fluidbaselinegrid.com/)

希望能帮助到你

Answer 2

更新:2016年火星

项目都是不同的,因此很难设置适合所有项目的全局规则.如果您正在寻找一个,这里有一个例子,比我更聪明的人想出来并且我之前使用过:

xsmall:     (max-width: 479px),
small:      (max-width: 599px),
medium:     (max-width: 767px),
large:      (max-width: 1024px),
largeOnly:  (min-width: 768px) and (max-width: 1024px),
xxl:        (min-width: 1200px),
tall:       (min-height: 780px),

请注意,缺少对设备,屏幕大小或名称方向的引用."平板电脑肖像"的大小对我们来说并不重要,因为我们应该尝试使事物响应并在任何屏幕尺寸上看起来都很好,而不是简单地适应几种屏幕尺寸.

是的,了解最常见的屏幕尺寸并避免疯狂的媒体查询非常重要,但最终,您的设计可能会开始乞求530px而不是480px或类似的调整.那为什么不呢？

现在,根据我的个人喜好:我一直记住媒体查询,但起初我倾向于几乎完全忽略设备大小.我也更喜欢桌面优先的方法,因为我发现更容易将布局调整为更小的尺寸(即:从页面中删除不那么重要的东西,减小尺寸等).

原始答案

有些人倾向于完全忽略设备尺寸.他们说您应该检查布局开始中断的位置,并仅在必要时创建媒体查询.其他人将检查您正在进行的不同设备尺寸.但是你会有一个320px的媒体查询,另一个480px的媒体查询等等......你可能会为此疯狂,也许根据你的布局甚至不需要!

所以,现在我正在努力做到这两点.我倾向于首先忽略设备大小,并且仅在必要时(布局中断时)创建一些媒体查询,直到它看起来像960px和更大的尺寸,以及更小的屏幕尺寸,如320px(我关心的最小设备尺寸)关于).