媒体查询以大多数智能手机为目标 [英] Media query to target most of smartphone

问题描述

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

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 :

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

作为iPhone开发人员，我在此设备上进行了测试，它确实运行良好.但是我希望我的CSS可以在所有类型的设备(Android，Windows Phone等)上使用.

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

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

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

推荐答案

更新时间:火星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 orientation on their names. The size of a 'tablet portrait' shouldn't really matter to us as we should try to make things responsive and look good on any screen size, not simply adaptive to a few screen sizes.

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

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?

现在，根据我的个人喜好:我一直都在关注媒体查询，但起初我倾向于几乎完全忽略设备尺寸.我还更喜欢桌面优先的方法，因为我发现将布局调整为较小的尺寸更容易(例如:从页面上删除不太重要的内容，减小尺寸等).

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-first approach cause I find it easier to adjust layouts to smaller sizes (ie.: removing not so important things from the page, reducing sizes, etc.).

原始答案

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

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!

所以，现在我想同时做这两个.我倾向于一开始忽略设备尺寸，仅在必要时(布局中断时)才会创建一些媒体查询，直到看起来适合960px及更大的尺寸，以及较小的屏幕尺寸(如320px)(我关心的最小设备尺寸)为止关于).

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

这篇关于媒体查询以大多数智能手机为目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！