CSS 针对大部分智能手机的媒体查询

Media query to target most of smartphone

提问by NLemay

I wrote some CSS code to make an HTML page fit better in mobile browsers. To be sure that my CSS apply only on mobiles, I use to following media query :

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

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

As an iPhone developer, I tested on this device and it works really well. But I want my CSS to be use on all kind of devices (Android, Windows Phone, etc).

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

What would be a good resolution that would fit most of smartphone of these days? Or do I need a more complex media query?

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

采纳答案by rafaelbiten

Updated: Mars 2016

更新：2016 年火星

Projects are all different, so it's hard to set a global rule that will fit them all. If you're looking for one, here's an example that someone smarter than me came up with and that I've used before:

项目各不相同，因此很难制定适合所有项目的全局规则。如果你正在寻找一个例子，这里有一个比我更聪明的人想出的例子，我以前用过：

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),

Note the lack of references to devices, screen sizes or orientationon their names. The size of a 'tablet portrait'shouldn't really matter to us as we should try to make things responsiveand look good on any screen size, not simply adaptiveto a few screen sizes.

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

Yes, it's important to know the most common screen sizes and avoid crazy media queries, but in the end, your design may start to beg for adjustments at 530px instead of 480px or something like that. So why not?

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

Now, on my personal preferences: I keep media queries in mind all the time, but at first I tend to ignore device sizes almost completely. I also prefer the desktop-firstapproach cause I find it easier to adjust layouts to smaller sizes (ie.: removing not so important things from the page, reducing sizes, etc.).

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

Original Answer

原答案

Some people tend to ignore device sizes completely. They say you should check where your layout starts to break and create media queries only when necessary. Others will check for different device sizes, as you're doing now. But then you'll have a media query for 320px, another for 480px, and so on... You may go crazy with that, and maybe it's not even necessary depending on your layout!

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

So, for now I'm trying to do both. I tend to ignore device sizes at first and will create some media queries only when necessary (when layout breaks), until it looks good for sizes like 960px and bigger, and also for smaller screen sizes, like 320px (the smallest device size I care about).

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

回答by Mario Bellart

Recently I started to work with Responsive Web Design and Media Queries, I didn't find a unique "magic" query, but after reading a lot of articles and a couple of books, I've adopted the Mobile First way to develop web pages, and I'm using some common Media Queries, here the breakpoints:

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

• 320 px Mobile portrait
• 480 px Mobile landscape
• 600 px Small tablet
• 768 px Tablet portrait
• 1024 px Tablet landscape/Netbook
• 1280 px & greater — Desktop

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

(Taken from http://fluidbaselinegrid.com/)

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

Hope it helps

希望能帮助到你