媒体问题:如何瞄准台式机、平板电脑和手机?

我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。

我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。

我找到了一些例子:

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

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

1359793 次浏览
小开

如果你想要瞄准一个设备，那么只需要写min-device-width。例如:

为iPhone

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

为平板电脑

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

这里有一些不错的文章:

  • < a href = " http://x7。fi/2010/02/12/ How -to-fit-your-website-for-the Apple - iPad /" rel="noreferrer">如何让你的网站适合苹果iPad
  • CSS3 Media Queries
小开
最佳答案

在我看来，这些是最好的断点:

@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-还是它们的组合，都要认识到规则的顺序，记住，如果多个规则匹配同一个元素，后面的规则将覆盖前面的规则。

小开
    我已经使用这个网站来找到分辨率，并根据实际数字开发CSS。 我的数字与上面的答案有很大的不同，除了我的CSS实际上击中了所需的设备。李< / p > < / > 同样，在你的媒体查询之后马上有这段调试代码 例句:< / p > 
    @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;
}
}

    在每个媒体查询中添加此调试项，您将看到应用了什么查询。< / p >

小开
  1. 特别小的设备(手机，最大480px)
  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. Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min -o-min-device-pixel-ratio: 1.5)， (-o-min-device-pixel-ratio: 1.5)， (-o-min-device-pixel-ratio: 1.5) 3/2)， (min-device-pixel-ratio: 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 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)和(-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1和2,iPad Mini设备-宽:768px设备-高:1024px -webkit-设备-像素-比例:1
  15. iPad 3和4设备-宽度:768px设备-高度:1024px -webkit-设备-像素-ratio: 2)
  16. iPhone 3G设备-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)
小开

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

一般的智慧是不针对特定的设备或尺寸，但要重新定义术语“断点”:

  • 开发网站手机第一使用百分比或ems，而不是像素，
  • 然后在一个更大的视口中尝试，注意它开始失败的地方，
  • 重新设计布局，并添加CSS媒体查询，只是为了处理破碎的部分，
  • 重复此过程，直到到达下一个断点。

您可以使用responsivepx.com来查找“自然”断点，如马克·德拉蒙德的《断点已死》。

使用自然断点

然后“断点”就变成了你的手机设计开始“崩溃”的实际点，即不再可用或在视觉上令人愉悦。一旦你有了一个运行良好的移动网站，没有媒体查询，你就可以不再关心具体的大小，只需添加媒体查询来处理连续较大的视口。

如果你不想把设计固定在屏幕尺寸上，这个方法可以通过无需针对特定设备来实现。在每个断点处设计本身的完整性确保它在任何尺寸下都能保持不变。换句话说，如果一个菜单/内容部分/任何东西在特定大小时停止使用，为该大小设计一个断点， 不对于特定的设备大小。

请参阅Lyza Gardner在行为断点上的帖子，以及Zeldman关于Ethan Marcotte和响应式网页设计是如何演变的最初想法的帖子。

使用语义标记

此外，更简单和更语义的DOM结构与nav， header， main， section， footer等(避免令人讨厌的div class="header"与嵌套的内部div标签)将更容易设计响应性，特别是通过使用CSS网格布局 (Sarah Drasner的网格生成器是一个很好的工具)和header0来根据您的RWD设计计划进行安排和重新排序。

小开
这不是像素数的问题，而是屏幕上字符的实际大小(毫米或英寸)的问题，这取决于像素密度。 因此，“min-width:”和“max-width:”是无用的。 关于这个问题的完整解释如下: # EYZ0 < / p >

“@media”查询会考虑像素数和设备像素比，从而产生“虚拟分辨率”，这是你在设计页面时必须考虑的问题:如果你的字体固定宽度为10px，“虚拟水平分辨率”为300 px，那么一行就需要30个字符。

小开

用于常见设备断点的媒体查询

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

因为有许多不同的屏幕尺寸总是在变化，最有可能总是在变化，最好的方法是基于你的设计破发点和媒体 查询。

要做到这一点，最简单的方法是抓取你完成的桌面设计，并在浏览器中打开它。缩小屏幕慢慢地使它更窄。观察设计什么时候开始，< em > "打破" < / em >，或者看起来可怕和局促。此时需要一个带有媒体查询的断点。

通常为台式机、平板电脑和手机创建三组媒体查询。但是，如果你的设计在这三个方面都很好，为什么要麻烦地添加三个不同的不必要的媒体查询呢?# EYZ0

小开

该行为在桌面上不会改变。但在平板电脑和手机上，我将导航栏展开以覆盖大的logo图像。根据你的logo高度使用边缘(顶部和底部)。

对于我的例子，60px的顶部和底部工作完美!

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

检查导航栏在这里。

小开

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


}

来源:# EYZ0

小开
  • 超小型设备~电话(<768 px)
  • 小设备~平板电脑(>= 768px)
  • 中型设备~台式机(>= 992px)
  • 大型设备~桌面 李(> = 1200 px) < / >
小开

现在最常见的是视网膜屏幕设备，换句话说:设备具有高分辨率和非常高的像素密度(但通常小于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 */


}

来源:# EYZ0

小开 
@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


}
小开

一个额外的特性是您还可以在<link>标记的媒体属性中使用media-queries。

<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被计算为假，那么.css文件及其内容将不会被渲染-blocking

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

在这里你可以阅读谷歌关于这个问题的文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

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

< p > Webpack https://www.npmjs.com/package/media-query-plugin # EYZ0 < / p > < p > PostCSS # EYZ0 < / p >
小开

我用下面一个来做我的工作。

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

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

@media (pointer:none), (pointer:coarse) {
}
小开 
$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; }
}
}

你也可以为小于320px的场景添加一个，比如Galaxy fold

小开

这只适用于那些还没有对网站进行“移动优先”设计，并正在寻找一个快速临时解决方案的人。

适用于流动电话

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

为平板电脑

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

笔记本电脑/台式

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

对于高分辨率笔记本电脑

@media (max-width:1280px){}
小开
这不仅仅是关于分辨率，你还需要找到设备的DPR:
whatismyscreenresolution “设备像素比(DPR)”是设备制造商给出的一个数字，用于HiDPI(每英寸高像素点)或Retina(苹果的商标)显示

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

小开

如果你想创建更具体的媒体查询，这里有一个例子，从这个链接复制的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) {


}

小开

很简单


/* Mobile Devices */
@media (max-width: 480px) {
foo > bar {
            

}
}
        

/* Low resolution Tablets and iPads */
@media (min-width: 481px) and (max-width: 767px) {
foo > bar {
        

}
}
        

/* Tablets iPads (Portrait) */
@media (min-width: 768px) and (max-width: 1024px){
foo > bar {
        

}
}
    

/* Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
foo > bar {
        

}
}
    

/* Big boi Monitors */
@media (min-width: 1281px) {
foo > bar {
        

}
}

提交答案