我应该针对哪些媒体设备/推荐大小的媒体查询? [英] Which devices/recommended sizes should I target with mediaqueries?

问题描述

我对响应式Web设计是陌生的，并且感到困惑，因为对于使用哪种媒体查询和针对哪些设备存在各种偏好.有没有标准?我想定位到iPhone，iPad和其他流行设备.

I am new to responsive web design, and got confused because there are various preferences about which media queries to use and which devices to target. Is there a standard? I'd like to target iPhone, iPads, and other popular devices.

我在网上找到了这个

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

但是我不知道它是否已经过时.我不知道哪个规则适用于iPhone 4，因为我运行了iPhone模拟器并且CSS无法正常工作(指的是最后一个CSS规则).

But I do not know if it is outdated. I do not know which rule targets iPhone 4, because I ran the iPhone simulator and the CSS didn't work (referring to last CSS rule).

推荐答案

我对媒体查询的想法是，您的目标应该是为您的网站创建与设备无关的框架.这意味着，考虑到苹果公司(以及其他公司)推入超高分辨率屏幕的原因，它必须兼顾分辨率和像素密度.

My thought with media queries is that your goal should be to make a device-agnostic framework for your website. That means it needs to be both resolution and pixel density aware, given Apple's (and others) push into super high resolution screens.

2018年更新:我的方法现在删除了screen和min-device-pixel-ratio媒体属性，并使用了屏幕尺寸范围.因为现在每个设备都注册为screen，并且现在几乎所有设备都是高分辨率的-您实际上不需要这些属性.如果您是在人流量高的网站上，也许它们还是有道理的.

2018 update: my approach now drops the screen and min-device-pixel-ratio media attributes and uses screen-size ranges. Because every device now registers as screen, and almost all of them are high resolution now - you really don't need those attributes. If you're on a super high traffic site maybe they still make sense though.

这是我在全球范围内布置断点的方式:

Here is how I lay out my breakpoints globally:

/* Below 380px is really just the iPhone SE at this point */

@media (min-width: 380px) and (max-width: 480px) {
  /* Most phones fall in here - iPhone, Galaxy, Pixel, etc */
}

@media (min-width: 480px) and (max-width: 768px) { 
  /* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */
}

@media (min-width: 768px) and (max-width: 980px) { 
  /* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */
}

@media (min-width: 980px) and (max-width: 1200px) { 
  /* Medium screen desktop (up to about 24") and laptops (13" laptops) */
}

@media (min-width: 1200px) and (max-width: 1600px) {
  /* Large screen desktop (27"), laptops (15+") */
}

@media (min-width: 1600px) { 
  /* Very large screen, 4K desktop + small TVs */
}

2012年建议:在实现双重授权方面，我见过克里斯·科耶尔(Chris Coyier)的CSS-tricks.com: http://css-tricks.com/snippets/css/retina -display-media-query/

2012 advice: I've seen on achieving that dual mandate comes from Chris Coyier's CSS-tricks.com: http://css-tricks.com/snippets/css/retina-display-media-query/

概念是根据大小创建初始断点，然后跟随像素密度媒体查询.这种方法为您提供了三个断点，每个断点都有一个像素密度感知选项.

The concept is to create the initial break points based on size and then have pixel-density media queries follow. This approach gives you three breakpoints, and each breakpoint has a pixel-density-aware option.

以下是Coyier的示例代码(我简化了供应商特定的前缀，以便您可以理解这个概念):

Here is Coyier's sample code (I simplified out the vendor-specific prefixes so you can grasp the concept):

@media only screen and (min-width: 320px) {
  /* Small screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) { 
  /* Small screen, retina, stuff to override above media query */
}

@media only screen and (min-width: 700px) {
  /* Medium screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) {
  /* Medium screen, retina, stuff to override above media query */
}

@media only screen and (min-width: 1300px) {
  /* Large screen, non-retina */
}

@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){ 
  /* Large screen, retina, stuff to override above media query */
}

我真的很喜欢这个概念:您可以为较旧的，可能受到带宽限制的设备节省带宽，同时为新的高分辨率设备提供所需的东西.您必须在像素密度媒体查询中放入的唯一代码应该是背景图像素材，因此，高分辨率图像会覆盖其在较旧设备上的像素化​​对应图像.

I really like this concept: you save bandwidth for older, likely bandwidth constrained devices while giving the new, high-res devices what they need. The only code you would have to put in the pixel-density media queries should be background-image stuff, so the higher-res imagery overrides its pixelated counterpart on older devices.

意识到，我的朋友，您试图达到一个不断变化的目标；)这是一个不断发展的概念，css-tricks.com，stackoverflow和其他博客似乎是跟上这一趋势的最佳方法.祝你好运.

Realize that you are trying to hit a moving target my friend ;) This is an evolving concept, css-tricks.com, stackoverflow and other blogs seem to be the best way to keep up. Good luck.

这篇关于我应该针对哪些媒体设备/推荐大小的媒体查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！