css - 媒体查询：如何定位桌面，平板电脑和移动设备？(Media Queries: How to target desktop, tablet and mobile?)

Question

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.

(我知道会有一些差异，但是有一个可用于定位这些设备的通用系统会很不错。)

Some examples I have found:

(我找到的一些例子：)

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

Or:

(要么：)

# 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 do you think these 'breakpoints' should be for each device?

(您认为这些“断点”对于每个设备应该是什么？)

  ask by betamax translate from so

Answer 1

IMO these are the best breakpoints:

(IMO这些是最好的断点：)

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

Edit : Refined to work better with 960 grids:

(编辑 ：精确到960网格更好地工作：)

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

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming.

(在实践中，许多设计师将像素转换为ems，主要是b / c ems更好地提供缩放。)

At standard zoom 1em === 16px .

(在标准缩放1em === 16px 。)

Multiply pixels by 1em/16px to get ems.

(将像素乘以1em/16px以获得ems。)

For example, 320px === 20em .

(例如， 320px === 20em 。)

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 you way onto larger and larger screens.

(响应评论， min-width是“移动优先”设计的标准，其中您首先设计最小的屏幕，然后添加不断增加的媒体查询，为更大和更大的屏幕工作。)

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.

(无论您是喜欢min- ， max-还是其组??合，都要注意规则的顺序，请记住，如果多个规则匹配相同的元素，则后面的规则将覆盖之前的规则。)