597

我一直在对媒体查询进行一些研究,但我仍然不太了解如何定位特定尺寸的设备。

我希望能够针对台式机、平板电脑和移动设备。我知道会有一些差异,但如果有一个通用系统可用于针对这些设备,那就太好了。

我发现的一些例子:

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

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

4

20 回答 20

839

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

编辑:精制以更好地使用 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 */ }

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

作为对评论的回应,这min-width是“移动优先”设计的标准,您首先针对最小的屏幕进行设计,然后添加不断增加的媒体查询,以您的方式在越来越大的屏幕上工作。

无论您更喜欢min-max-还是它们的组合,请注意规则的顺序,请记住,如果多个规则匹配同一个元素,则后面的规则将覆盖前面的规则。

于 2011-09-08T21:19:54.200 回答
214

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

一般的智慧不是针对特定的设备或尺寸,而是重新定义“断点”一词:

  • 使用百分比或 ems,而不是像素,为移动优先开发网站,
  • 然后在更大的视口中尝试它并注意它开始失败的地方,
  • 重新设计布局并添加 CSS 媒体查询来处理损坏的部分,
  • 重复该过程,直到到达下一个断点。

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

使用自然断点

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

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

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

使用语义标记

此外,带有, , ,等的 DOM 结构越简单,语义越多(避免像嵌套内部标签这样的可憎行为),设计响应性就越容易,尤其是通过使用CSS 网格布局避免浮动(Sarah Drasner 的网格生成器是很好的工具)和flexbox,用于根据您的 RWD 设计计划安排和重新排序。navheadermainsectionfooterdiv class="header"div

于 2013-12-03T12:17:05.463 回答
163

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

适用于 iPhone

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

平板电脑

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

这里有一些不错的文章:

于 2011-06-16T11:10:46.740 回答
59
  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;
      }
    } 
    

    在每个媒体查询中添加此调试项,您将看到已应用的查询。

于 2013-10-20T04:15:58.897 回答
40

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

    }

来源:https ://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

于 2017-01-04T08:01:23.183 回答
31

常见设备断点的媒体查询

/* 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 */
}
于 2016-06-02T17:43:20.307 回答
21
  1. 超小型设备(手机,最大 480 像素)
  2. 小型设备(平板电脑,768px 及以上)
  3. 中型设备(大型横向平板电脑、笔记本电脑和台式机,992 像素及以上)
  4. 大型设备(大型桌面,1200 像素及以上)
  5. 纵向电子阅读器(Nook/Kindle),较小的平板电脑 - 最小宽度:481px
  6. 纵向平板电脑、纵向 iPad、横向电子阅读器 - 最小宽度:641px
  7. 平板电脑、横向 iPad、低分辨率笔记本电脑 - 最小宽度:961 像素
  8. HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
  9. 三星 Galaxy S2 设备宽度:320px 设备高度: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 设备宽度:320px 设备高度: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)
于 2013-11-05T05:41:14.103 回答
8

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

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

}

来源:CSS-Tricks 网站

于 2018-04-02T05:24:09.247 回答
8

这仅适用于那些尚未对其网站进行“移动优先”设计并正在寻找快速临时解决方案的人。

手机用

@media (max-width:480px){}

平板电脑

@media (max-width:960px){}

适用于笔记本电脑/台式机

@media (min-width:1025px){}

适用于高分辨率笔记本电脑

@media (max-width:1280px){}
于 2021-01-05T07:20:24.237 回答
7

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

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

于 2014-10-16T07:54:06.607 回答
6

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

最简单的方法是获取完成的桌面设计并在 Web 浏览器中打开它。慢慢缩小屏幕使其变窄。观察设计何时开始“中断”,或者看起来很糟糕和局促。此时需要一个带有媒体查询的断点。

为台式机、平板电脑和手机创建三组媒体查询是很常见的。但是,如果您的设计在这三个方面看起来都不错,为什么还要为添加三个不必要的不​​同媒体查询的复杂性而烦恼。根据需要进行操作!

于 2016-09-01T01:58:08.440 回答
4

一个额外的功能是您还可以在标签的媒体属性中使用媒体查询。<link>

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

这样,浏览器将下载所有 CSS 资源,而不管媒体属性如何。 不同之处在于,如果 media 属性的 media-query 被评估为false,则该 .css 文件及其内容将不会被渲染阻塞。

因此,建议在标签中使用media属性,<link>因为它可以保证更好的用户体验。

在这里您可以阅读有关此问题的 Google 文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

一些工具可以帮助您根据您的媒体查询自动分离不同文件中的 css 代码

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

于 2019-01-13T19:54:19.260 回答
3

我正在使用以下一个来完成我的工作。

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

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

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

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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 */
}
于 2019-07-04T06:03:09.177 回答
3
  • 超小型设备 ~ 手机 (< 768px)
  • 小型设备 ~ 平板电脑 (>= 768px)
  • 中型设备 ~ 台式机 (>= 992px)
  • 大型设备 ~ 台式机 (>= 1200px)
于 2017-12-11T19:06:53.967 回答
2

桌面上的行为不会改变。但在平板电脑和手机上,我扩展导航栏以覆盖大徽标图像。注意:根据您的徽标高度使用边距(顶部和底部) 。

就我而言,60px 的顶部和底部效果完美!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

在此处检查导航栏。

于 2016-10-23T05:40:33.983 回答
2

对我来说最好的解决方案,检测设备是否是移动的:

@media (pointer:none), (pointer:coarse) {
}
于 2020-10-04T14:06:38.793 回答
2

如果你想创建更具体的媒体查询,这里有一个 iPhone 的例子,它是从这个链接https://css-tricks.com/snippets/css/media-queries-for-standard-devices/复制的,你可以找到媒体查询在此链接上查看更多设备)

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

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

}

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

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

于 2021-11-07T16:25:21.480 回答
1
$xs : "extra-small";
$s  : "small";
$m  : "medium";
$l  : "large";
$xl : "extra-large";

@mixin respond($breakpoint) {
  @if($breakpoint == $xs)  {
    @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
  }
  @if($breakpoint == $s)  {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @if($breakpoint == $m)  {
    @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if($breakpoint == $l)  {
    @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if($breakpoint == $xl)  {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

您还可以为小于 320 像素的屏幕添加一个,例如 Galaxy fold

于 2020-12-30T11:05:43.307 回答
0

这不仅仅是关于分辨率,您还需要找到设备的 DPR:
whatismyscreenresolution “设备像素比(DPR)是设备制造商给出的数字,用于 HiDPI(每英寸高点数)或 Retina(Apple 的商标)显示器”

媒体查询示例:(最小分辨率:3.0dppx)

于 2021-07-28T19:04:06.520 回答
-3
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
于 2018-09-14T11:38:37.717 回答