9

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

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

作为一名 iPhone 开发人员，我在这款设备上进行了测试，效果非常好。但我希望我的 CSS 能够在所有类型的设备（Android、Windows Phone 等）上使用。

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

4

2 回答 2

12

最近我开始研究响应式网页设计和媒体查询，我没有找到一个独特的“神奇”查询，但是在阅读了很多文章和几本书之后，我采用了移动优先的方式来开发网页，我正在使用一些常见的媒体查询，这里是断点：

  • 320 px 手机人像
  • 480 px 移动横向
  • 600 px 小型平板电脑
  • 768 px 平板电脑肖像
  • 1024 像素平板电脑横向/上网本
  • 1280 像素及以上 — 桌面

（取自http://fluidbaselinegrid.com/）

希望能帮助到你

于 2013-01-09T12:08:26.783 回答
8

更新：火星 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),

请注意名称中没有提及设备、屏幕尺寸或方向。“平板电脑肖像”的大小对我们来说并不重要，因为我们应该尝试让事物在任何屏幕尺寸上都具有响应性并看起来不错，而不是简单地适应几个屏幕尺寸。

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

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

原始答案

有些人倾向于完全忽略设备尺寸。他们说你应该检查你的布局开始中断的地方，只有在必要时才创建媒体查询。正如您现在所做的那样，其他人将检查不同的设备尺寸。但是随后您将有一个 320 像素的媒体查询，另一个 480 像素的媒体查询，依此类推……您可能会为此发疯，根据您的布局，甚至可能没有必要！

所以，现在我正在尝试两者兼而有之。一开始我倾向于忽略设备尺寸，并且仅在必要时（当布局中断时）创建一些媒体查询，直到它看起来适合 960 像素和更大的尺寸，以及更小的屏幕尺寸，比如 320 像素（我关心的最小设备尺寸关于）。

于 2013-01-08T22:19:40.693 回答