css - 无法使用媒体查询专门针对我的桌面

标签 css media-queries

我正在尝试使用 1366 x 768 的媒体查询 CSS 专门针对我的桌面分辨率。因此我使用了这种方法。

@media (max-width: 1367px)

这个桌面媒体查询 CSS 确实有效。

不幸的是,它与我的 S4 和 iPad 的媒体查询 CSS 冲突,导致它们无法正常工作。如下图是我的S4和iPad的媒体查询

S4

@media only screen and (max-device-width: 440px)

iPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1)

除了我在上面尝试完善我的 CSS 的方法之外,还有什么方法可以专门针对我的 1366x768 桌面分辨率?

最佳答案

@media (max-width: 1367px) and (min-width: 1365px)

您的最大宽度规则包括宽度小于 1376 像素的所有内容,因此您应该设置一个最小值。

请记住,这些测量指的是浏览器窗口,而不是实际屏幕,因此它们可能不适合您的目的。

例如,我的桌面分辨率为 1600 x 1200。 在全屏模式下,我的 Firefox 窗口(将由 css 引用)为 1583 像素宽。不是 1600 像素。

关于css - 无法使用媒体查询专门针对我的桌面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21024082/

相关文章:

jquery - Flash 视频仍在使用 jQuery 删除的 DIV 上播放(IE 错误)

css - `font-weight` 不在 chrome 上工作?

html - 调整所有 DIV 内容的大小

css - 如何将桌面媒体查询样式应用于 IE?

jquery - 删除 css 悬停样式

javascript - 更改文本节点的样式但不更改子节点

css - 将自定义媒体查询添加到 Bootstrap 3 响应实用程序类

html - 在 CSS 中使用不同背景颜色的方法有哪些?

css - 我的网站不适合移动设备,媒体查询/视口(viewport)被覆盖

html - Internet Explorer 中的 Firebug 替代品