媒体查询：如何定位台式机、平板电脑和移动设备？

G

Gottlieb Notschnabel

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

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

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

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

为什么要使用最小宽度而不是最大宽度？您将如何防止 min-width: 320px css 覆盖 min-width: 801px ？

此代码在我的移动设备上不起作用！有人可以提供一个工作示例！

有人有与此等效的“最大宽度”吗？

2018 - 2k 和 4k 正在增加

@Josh请搜索“设备像素比”（DPR）。物理像素和 CSS 像素之间是有区别的。如果 DPR 为 3，则 1 个 CSS 像素代表 3 个物理像素。因此，如果您创建一个 1x1 像素大小的 HTML 元素，它将以 3x3 设备像素显示在您的屏幕上。 developer.mozilla.org/en-US/docs/Web/API/Window/…

C

Community

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

general wisdom 不是针对特定设备或尺寸，而是重新定义“断点”一词：

使用百分比或 ems，而不是像素，为移动优先开发网站，

然后在更大的视口中尝试它并注意它开始失败的地方，

重新设计布局并添加 CSS 媒体查询来处理损坏的部分，

重复该过程，直到到达下一个断点。

您可以使用 responsivepx.com 来查找“自然”断点，如 'breakpoints are dead' by Marc Drummond。

使用自然断点

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

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

请参阅 Lyza Gardner 在 behavioral breakpoints 上的帖子，以及 Zeldman 关于 Ethan Marcotte 和 how responsive web design evolved 的最初想法的帖子。

使用语义标记

此外，具有 nav、header、main、section、footer 等的 DOM 结构更简单、更语义化（避免像 div class="header" 那样带有嵌套内部 { 10} 个标签）更容易设计响应性，尤其是通过使用 CSS Grid Layout（Sarah Drasner 的 grid generator 是一个很好的工具）和 flexbox 来根据您的 RWD 设计计划安排和重新排序来避免浮动.

客户会希望他们的网站在他们的 iPad 上看起来像那样。我最好的断点是让网站切换到 iPad 上的移动布局。客户不会接受，他们希望花哨的版本出现在 iPad 和其他平板电脑上。一般的智慧不会支付我的薪水:) 我需要使用视口元标记来做一些技巧。这非常痛苦，但我在 JavaScript 的帮助下（一如既往）成功了。 PS：我使用厘米单位，而不是像素。

使用自然断点，您可以在横向模式下拥有一个中等大小的断点，包括 iPad（和其他平板电脑），或者为纵向模式添加另一个断点。我有时会使用四个断点，总是以移动优先方式启动 CSS 和所有标记（缩小规模并专注于移动设备意味着您的设计和内容被缩减为基本要素，您可以随着尺寸的增加而扩展），一个略高于 400 像素宽（或“高于移动尺寸”），然后是两个桌面尺寸，一个超宽。然后，您可以设置“高于移动设备”断点的样式以在 iPad 上正常工作。

这对所有情况都是不够的。以复选框为例。它们可能适用于 PC 上的所有 Web 浏览器，但在平板电脑上对于用户来说太小了以至于无法触摸。有时您确实需要以设备为目标，无论这是否普遍。这是一篇好文章：html5rocks.com/en/mobile/cross-device

我和戴夫一起做这个——有太多的设备，你不能为所有的设备设计。使用自然断点可确保您的站点无论可用屏幕大小如何都能正常工作。关于希望他们的网站以某种方式呈现的客户 - 您需要对他们进行教育。关于复选框太小 - 你的标签在哪里？

@user1411056 - 好文章。我想这取决于您的目标以及您的网站/网络应用程序的工作方式。我想说基本的响应式设计应该在改进到位之前支撑一切。 diggersworld 我完全是为了教育客户——他们为什么还要付钱给你？是的，复选框可以响应；点击标签是等效的，并且标签可以设置样式。然后是在触摸设备上悬停的无用；可以有大屏幕，300ms tap delay。一个基本的 RD 基础，由 JS 增强。

F

Fizzix

如果您想定位设备，只需编写 min-device-width。例如：

适用于 iPhone

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

平板电脑

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

这里有一些不错的文章：

如何让您的网站适合 Apple iPad

CSS3 媒体查询

我的平板电脑的宽度为 2560x1600

可能是这样，但移动设备上的浏览器具有“设备像素比”。这是它将每个逻辑“像素”视为设备上的 2、3 甚至更多实际像素的地方。否则 20px 的高度将非常小而且无法按下 - 尤其是在您的屏幕上！

@media only screen and (min-device-width: 480px){} 我试过了 - 也适用于台式机。但是如果我们只想要移动设备呢？

@Darius.V，这遵循“移动优先”的心态，这意味着您开始移动，然后随着屏幕变大进行更改，因此您还需要包括：@media only screen and (min-device-width: 1024){} 或类似的内容来覆盖这些更改。或者，如果您从桌面设计开始并且只想对小于 1024 的内容进行更改，则可以执行 @media only screen and (MAX-device-width: 1024){}。

这意味着桌面将无法与 RWD 一起使用，因为 min-device-width。建议做 min-width 并且不基于设备。真正的响应不需要刷新或设备限制

k

karlzafiris

我已经使用这个网站找到了分辨率并根据实际数字开发了 CSS。我的数字与上面的答案有很大不同，除了我的 CSS 实际上命中了所需的设备。此外，在您的媒体查询之后立即使用这段调试代码，例如：@media only screen and (min-width: 769px) and (max-width: 1281px) { /* 用于 10 英寸平板电脑屏幕 */ body::before {内容：“平板电脑到某些桌面媒体查询 (769 > 1281) 已触发”；字体粗细：粗体；显示：块；文本对齐：居中；背景：rgba(255, 255, 0, 0.9); /* 半透明黄色 */ position: absolute;顶部：0；左：0；右：0； z指数：99；在每个单独的媒体查询中添加这个调试项，您将看到应用了什么查询。

X

Xenoy

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

这个答案需要一个源链接。所以如果 Twitter bootstrap 改变了它的值，我们可以在这里得到它的反映。请问可以附上来源吗？谢谢

P

Purvik Dhorajiya

常见设备断点的媒体查询

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

W

Web Designer cum Promoter

超小型设备（手机，最大 480 像素）小型设备（平板电脑，768 像素及以上）中型设备（大型横向平板电脑、笔记本电脑和台式机，992 像素及以上）大型设备（大型台式机，1200 像素及以上）纵向电子阅读器（ Nook/Kindle），较小的平板电脑 - 最小宽度：481 像素纵向平板电脑，纵向 iPad，横向电子阅读器 - 最小宽度：641 像素平板电脑，横向 iPad，低分辨率笔记本电脑 - 最小宽度：961 像素 HTC 一个设备宽度： 360px 设备高度：640px -webkit-device-pixel-ratio：3 三星 Galaxy S2 设备宽度：320px 设备高度：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 Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel -ratio: 2 (min--moz-device-pixel-ratio: 2), - 旧版 Firefox 浏览器（Firefox 16 之前） - Samsung Galaxy S4 设备宽度：320px 设备高度：640px -webkit-device-pixel-比率：3 LG Nexus 4 设备宽度：384px 设备高度：592px -webkit-device-pixel -ratio：2 Asus Nexus 7 设备宽度：601px 设备高度：906px -webkit-min-device-pixel-ratio：1.331）和（-webkit-max-device-pixel-ratio：1.332）iPad 1 和 2， iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1 iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2) iPhone 3G 设备-width：320px 设备高度：480px -webkit-device-pixel-ratio：1）iPhone 4 设备宽度：320px 设备高度：480px -webkit-device-pixel-ratio：2）iPhone 5 设备宽度：320px设备高度：568px -webkit-device-pixel-ratio：2）

Sansung Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) and (-webkit-min-device-pixel-ratio: 2) 测试和工作。

E

Ezequiel Adrian

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

l

lovelyramos

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

手机用

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

平板电脑

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

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

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

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

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

C

Community

这不是像素数的问题，而是屏幕上字符的实际大小（以毫米或英寸为单位）的问题，这取决于像素密度。因此“最小宽度：”和“最大宽度：”是无用的。此问题的完整说明如下：what exactly is device pixel ratio?

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

伟大的。那么媒体查询应该是什么？

k

karlzafiris

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

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

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

确实，开发移动优先是有道理的，因为（根据经验！）当你有更多空间而不是更少空间时，重新排列东西要容易得多:-)

J

Juanma Menendez

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

<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 文件及其内容将不会被渲染阻塞。

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

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

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

网页包 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

M

Mayank Dudakiya

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

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

k

karlzafiris

超小型设备 ~ 手机 (< 768px)

小型设备 ~ 平板电脑 (>= 768px)

中型设备 ~ 台式机 (>= 992px)

大型设备 ~ 台式机 (>= 1200px)

A

Alijon Jumanazarov

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

/* ----------- iPhone 4 和 4S ----------- */ /* 纵向和横向 */ @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 和 5SE ----------- */ /* 纵向和横向 */ @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和8 ------ ----- */ /* 纵向和横向 */ @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 */ @医学ia only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: Landscape) { } /* -- --------- iPhone X ----------- */ /* 纵向和横向 */ @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）和（-webkit-min-device-pixel-ratio：3）和（方向：横向）{}

k

karlzafiris

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

就我而言，60px 的顶部和底部效果完美！

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

检查导航栏 here。

K

Koby Douek

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

@media (pointer:none), (pointer:coarse) {
}

这个答案不能告诉设备是否是移动设备，它会告诉设备是否有指针设备。 from MDN: " pointer...用户是否有指针设备（例如鼠标）"

我有带鼠标和键盘的android

我有一个带触摸屏但没有鼠标的桌面

K

Khim Bahadur Gurung

$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

M

Mike Ciffone

漂亮又简单


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

B

BlackRaider

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

媒体查询示例：（最小分辨率：3.0dppx）

S

Shailesh

@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

    }

媒体查询：如何定位台式机、平板电脑和移动设备？

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

友情链接

联系我们