我应该使用媒体查询来定位哪些设备/推荐的尺寸？

Question

我是响应式网页设计的新手,并且对于使用哪些媒体查询和设备要定位的各种偏好感到困惑.有标准吗？我想定位iphone,ipads和热门设备？

我在网上发现了这个:

/* 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规则)

谢谢

Answer 1

我对媒体查询的想法是,您的目标应该是为您的网站制作与设备无关的框架.这意味着它需要同时兼顾分辨率和像素密度,因为Apple(和其他人)推动超高分辨率屏幕.

2018更新:我的方法现在删除screen和min-device-pixel-ratio媒体属性并使用屏幕大小范围.因为现在每个设备都注册为screen,现在几乎所有设备都是高分辨率 - 你真的不需要这些属性.如果你在一个超高流量的站点,他们仍然有意义.

以下是我在全球范围内列出断点的方法:

/* 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咨询:我已经看到了实现这一目标的双重任务来自克里斯Coyier的CSS-tricks.com: http://css-tricks.com/snippets/css/retina-display-media-query/

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

这是Coyier的示例代码(我简化了特定于供应商的前缀,因此您可以掌握这个概念):

@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 */
}

我非常喜欢这个概念:为旧的,可能带宽受限的设备节省带宽,同时为新的高分辨率设备提供所需的设备.您必须在像素密度媒体查询中添加的唯一代码应该是背景图像,因此较高分辨率的图像会覆盖旧设备上的像素化​​对应图像.

意识到你正试图击中一个移动目标我的朋友;)这是一个不断发展的概念,css-tricks.com,stackoverflow和其他博客似乎是最好的跟上方式.祝好运.