CSS 媒体查询:如何定位桌面、平板电脑和移动设备?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6370690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:47:01  来源:igfitidea点击:

Media Queries: How to target desktop, tablet, and mobile?

cssmobilemedia-queriestablet

提问by betamax

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 should the breakpoints be for each device?

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

回答by ryanve

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. At standard zoom 1em === 16px. Multiply pixels by 1em/16pxto get ems. For example, 320px === 20em.

在实践中,许多设计师将像素转换为 ems,主要是 b/c ems 更适合缩放。在标准变焦1em === 16px。将像素乘以1em/16px得到 em。例如,320px === 20em

In response to the comment, min-widthis 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. 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-width是“移动优先”设计的标准,其中您首先为最小的屏幕设计,然后添加不断增加的媒体查询,在越来越大的屏幕上工作。无论您更喜欢min-max-还是它们的组合,请注意规则的顺序,请记住,如果多个规则匹配同一元素,则后面的规则将覆盖前面的规则。

回答by Dave Everitt

Don't target specific devices or sizes!

不要针对特定​​设备或尺寸!

The general wisdomis not to target specific devices or sizes, but to reframe the term 'breakpoint':

一般的智慧不针对特定的设备或大小,而是重新塑造了“断点”一词:

  • develop the site for mobile firstusing percentages or ems, not pixels,
  • then try it in a larger viewport and note where it begins to fail,
  • redesign the layout and add a CSS media query just to handle the broken parts,
  • repeat the process until you reach the next breakpoint.
  • 首先使用百分比或 em开发移动网站,而不是像素,
  • 然后在更大的视口中尝试并注意它开始失败的地方,
  • 重新设计布局并添加一个 CSS 媒体查询来处理损坏的部分,
  • 重复这个过程,直到到达下一个断点。

You can use responsivepx.comto find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

您可以使用responsivepx.com找到“自然”断点,如Marc Drummond 的“断点已死”

Use natural breakpoints

使用自然断点

The 'breakpoints' then become the actual point at which your mobile design begins to 'break'i.e. cease to be usable or visually pleasing. Once you have a good working mobile site, without media queries, you can stop being concerned about specific sizes and simply add media queries that handle successively larger viewports.

“断点”然后成为您的移动设计开始“中断”实际点,即不再可用或视觉上令人愉悦。一旦您拥有一个良好的移动网站,无需媒体查询,您就可以不再关注特定大小,只需添加处理连续更大视口的媒体查询。

If you're not trying to pin a design to an exact screen size, this approach works by removing the need to target specific devices. The integrity of the design itself at each breakpointensures that it will hold up at any size. In other words, if a menu/content section/whatever stops being usable at a certain size, design a breakpoint for that size, notfor a specific device size.

如果您不打算将设计固定到精确的屏幕尺寸,则此方法的工作原理是消除针对特定设备的需要设计本身在每个断点处完整性确保它可以承受任何大小。换句话说,如果菜单/内容部分/任何在特定大小下停止可用,请为该大小设计断点而不是为特定设备大小。

See Lyza Gardner's post on behavioural breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolvedfrom the intitial idea.

请参阅 Lyza Gardner 关于行为断点的帖子,以及 Zeldman 关于 Ethan Marcotte 以及响应式网页设计如何从最初的想法演变而来的帖子。

Use semantic markup

使用语义标记

Further, the simpler and more semantic the DOM structurewith nav, header, main, section, footeretc. (avoiding abominations like div class="header"with nested inner divtags) the easier it will be to engineer responsiveness, especially avoiding floats by using CSS Grid Layout(Sarah Drasner's grid generatoris a great tool for this) and flexboxfor arranging and re-ordering according to your RWD design plan.

另外,更简单,更语义DOM结构navheadermainsectionfooter等(避免像可憎div class="header"嵌套内div标签)就越容易将是工程师的反应,特别是通过避免浮动CSS网格布局(莎拉Drasner的网格生成是一个一个很好的工具)和flexbox用于根据您的 RWD 设计计划进行安排和重新排序。

回答by sandeep

If you want to target a device then just write min-device-width. For example:

如果你想定位一个设备,那么只需写min-device-width. 例如:

For iPhone

对于 iPhone

@media only screen and (min-device-width: 480px){}

For tablets

平板电脑用

@media only screen and (min-device-width: 768px){}

Here are some good articles:

这里有一些不错的文章:

回答by user2060451

  1. I have used this siteto find the resolution and developed CSS per actual numbers. My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices.

  2. Also, have this debugging piece of code right after your media query e.g:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
      /* for 10 inches tablet screens */
      body::before {
        content: "tablet to some desktop media query (769 > 1281) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    } 
    

    Add this debugging item in every single media query and you will see what query has being applied.

  1. 我已经使用这个网站来查找分辨率并根据实际数字开发 CSS。我的数字与上述答案有很大不同,除了我的 CSS 实际命中了所需的设备。

  2. 此外,在您的媒体查询之后立即使用这段调试代码,例如:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
      /* for 10 inches tablet screens */
      body::before {
        content: "tablet to some desktop media query (769 > 1281) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    } 
    

    在每个单独的媒体查询中添加此调试项,您将看到应用了哪些查询。

回答by Santosh Khalse

The best breakpoints recommended by Twitter Bootstrap

Twitter Bootstrap 推荐的最佳断点

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

回答by Purvik Dhorajiya

Media queries for common device breakpoints

常见设备断点的媒体查询

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

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

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

回答by Web Designer cum Promoter

  1. Extra small devices (phones, up to 480px)
  2. Small devices (tablets, 768px and up)
  3. Medium devices (big landscape tablets, laptops, and desktops, 992px and up)
  4. Large devices (large desktops, 1200px and up)
  5. portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px
  6. portrait tablets, portrait iPad, landscape e-readers - min-width:641px
  7. tablet, landscape iPad, lo-res laptops - min-width:961px
  8. HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
  9. Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5
  10. Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -
  11. Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3
  12. LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
  13. Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1
  15. iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)
  16. iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)
  17. iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)
  18. iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)
  1. 超小型设备(手机,最大 480 像素)
  2. 小型设备(平板电脑,768px 及以上)
  3. 中型设备(大型平板电脑、笔记本电脑和台式机,992px 及以上)
  4. 大型设备(大型桌面,1200px 及以上)
  5. 纵向电子阅读器(Nook/Kindle),较小的平板电脑 - 最小宽度:481px
  6. 纵向平板电脑、纵向 iPad、横向电子阅读器 - 最小宽度:641px
  7. 平板电脑、横向 iPad、低分辨率笔记本电脑 - 最小宽度:961px
  8. HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
  9. 三星 Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (最小设备像素比:1.5
  10. 三星 Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - 旧版 Firefox 浏览器(Firefox 16 之前) -
  11. 三星 Galaxy S4 设备宽度:320px 设备高度:640px -webkit-device-pixel-ratio:3
  12. LG Nexus 4 设备宽度:384px 设备高度:592px -webkit-device-pixel-ratio:2
  13. 华硕 Nexus 7 设备宽度:601px 设备高度:906px -webkit-min-device-pixel-ratio: 1.331) 和 (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 和 2,iPad Mini 设备宽度:768px 设备高度:1024px -webkit-device-pixel-ratio: 1
  15. iPad 3 和 4 设备宽度:768px 设备高度:1024px -webkit-device-pixel-ratio: 2)
  16. iPhone 3G 设备宽度:320px 设备高度:480px -webkit-device-pixel-ratio: 1)
  17. iPhone 4 设备宽度:320px 设备高度:480px -webkit-device-pixel-ratio: 2)
  18. iPhone 5 设备宽度:320px 设备高度:568px -webkit-device-pixel-ratio: 2)

回答by jumpHyman

It's not a matter of pixels count, it's a matter of actual size (in mm or inches) of characters on the screen, which depends on pixels density. Hence "min-width:" and "max-width:" are useless. A full explanation of this issue is here: what exactly is device pixel ratio?

这不是像素数的问题,而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题,这取决于像素密度。因此“最小宽度:”和“最大宽度:”是无用的。这个问题的完整解释在这里: 设备像素比到底是什么?

"@media" queries take into account the pixels count and the device pixel ratio, resulting in a "virtual resolution" which is what you have to actually take into account while designing your page: if your font is 10px fixed-width and the "virtual horizontal resolution" is 300 px, 30 characters will be needed to fill a line.

“@media”查询会考虑像素数和设备像素比率,从而产生“虚拟分辨率”,这是您在设计页面时必须实际考虑的因素:如果您的字体为 10px 固定宽度并且“虚拟水平分辨率”为 300 像素,填充一行需要 30 个字符。

回答by Robert Rocha

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your break pointsand mediaquerieson your design.

由于有许多不同的屏幕尺寸总是在变化,而且很可能总是在变化,因此最好的方法是将断点媒体查询基于您的设计。

The easiest way to go about this is to grab your completed desktop design and open it in your web browser. Shrinkthe screen slowlyto make it narrower. Observe to see when the design starts to, "break", or looks horrible and cramped. At this point a break point with a media query would be required.

解决此问题的最简单方法是获取完成的桌面设计并在 Web 浏览器中打开它。慢慢缩小屏幕以使其更窄。观察设计何时开始“破裂”或看起来可怕而局促。此时需要一个带有媒体查询的断点。

It's common to create three sets of media queries for desktop, tablet and phone. But if your design looks good on all three, why bother with the complexity of adding three different media queries that are not necessary. Do it on an as-needed basis!

通常为台式机、平板电脑和手机创建三组媒体查询。但是,如果您的设计在所有三个方面看起来都不错,为什么还要为添加三个不必要的不​​同媒体查询而烦恼呢?根据需要做!

回答by Ezequiel Adrian

Nowadays the most common thing is to see retina-screen devices, in other words: devices with high resolutions and a very high pixel density (but usually smaller than 6 inches physical size). That's why you will need retina display specialized media-queries on your CSS. This is the most complete example I could find:

现在最常见的是看到视网膜屏幕设备,换句话说:具有高分辨率和非常高像素密度的设备(但通常小于 6 英寸的物理尺寸)。这就是为什么你需要在你的 CSS 上使用 Retina 显示专门的媒体查询。这是我能找到的最完整的例子:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  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 (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  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 (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Source: CSS-Tricks Website

来源:CSS-Tricks 网站