媒体查询:如何定位台式机、平板电脑和移动设备? [英] Media Queries: How to target desktop, tablet, and mobile?

问题描述

我一直在对媒体查询进行一些研究，但我仍然不太了解如何定位特定大小的设备.

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.

我希望能够定位到桌面设备、平板电脑和移动设备.我知道会有一些差异，但是拥有一个可用于定位这些设备的通用系统会很好.

I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

我发现的一些例子:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

或者:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

每个设备的断点应该是什么?

What should the breakpoints be for each device?

推荐答案

IMO 这些是最好的断点:

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

编辑:经过改进以更好地处理 960 个网格:

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

在实践中，许多设计师将像素转换为 ems，主要是因为 ems 提供更好的缩放.在标准缩放1em === 16px，像素乘以1em/16px 得到ems.例如，320px === 20em.

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

响应评论，min-width 是mobile-first"中的标准设计，其中您从为最小的屏幕设计开始，然后添加不断增加的媒体查询，以自己的方式在越来越大的屏幕上工作.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

无论您喜欢 min-、max- 还是它们的组合，请注意规则的顺序，请记住，如果多个规则匹配相同的元素，后面的规则会覆盖前面的规则.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

这篇关于媒体查询:如何定位台式机、平板电脑和移动设备?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！