抑制CSS降价邮件

从我目前的实践来看,我可以看出特定于设备的媒体查询绝对不是正确的做法。 The thread 您刚刚发布的内容还包括以下声明:

如果你对此的反应是:你不应该把断点建立在设备上!!你说得对。

移动优先的方法也是我不练习的。

适合我所有项目的最佳实践,无论是应用程序还是简单的网站,都包含 最大宽度

诀窍不是使用严格的分辨率集,而是在调整视口大小时为特定问题使用所需的分辨率。

MDN and read about media queries . 仅对1920px以上的分辨率使用最小宽度查询,对低分辨率使用最大宽度查询。

最通用的媒体查询,您可以放心使用:

@media screen and (max-width: *px) {}

其中*是要寻址的视区宽度的像素宽度值。

所有的斯琴科夫 wirtten here 适用,因此在大快捷方式中使用 max/min-width

但是总有一个但是这就是为什么。。。如果你对像素完美的解决方案感兴趣,你应该考虑加入你的阿森纳 max/min-resolution 对于现代浏览器和 device-pixel-ratio CanIUse: Media Queries: resolution feature )用于检测高dpi屏幕。背后的原因是不强迫用户使用放大镜时,使用这样的显示器,即视网膜显示器或4k游戏机屏幕。关于在哪里以及如何设置断点的话题我真的很喜欢 Responsive UI dp 基于屏幕密度的相对单位(关于主题的更多信息 here (Material) 和 here (MDN) ). 如果您喜欢他们在响应性方面所做的工作,只需从下面检查他们的CSS规则 F12 开发工具,它们(在编写时)如下所示:

@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:800px),
       only screen and (min--moz-device-pixel-ratio:2) and (max-width:800px),
       only screen and (min-resolution:192dpi) and (max-width:800px),
       only screen and (min-resolution:2dppx) and (max-width:800px)

换言之,为了使长篇大论变得简短,为了完善Sqnkovs答案,您可能还需要考虑屏幕密度。

如果需要根据浏览器窗口的大小调整样式,请使用 max-width or min-width device-width 无论如何,功能,因为这意味着一个桌面用户谁喜欢调整他们的浏览器窗口只占一半的屏幕宽度,将得到您的网站呈现明智,而不是被迫水平滚动。

User-Agent ,在为页面提供服务之前使用服务器端,或者使用JavaScript通过 navigator.userAgent . 试图使用 设备宽度 和 device-height 对于设备检测 在大多数情况下 千

(你也应该考虑你是否真的需要 feature detection 而不是设备检测。)