google-chrome - 仅在 Chrome 上定位两种屏幕尺寸

Question

我正在使用@media 查询仅使 Chrome 浏览器将“.l-triangle”定位在特定位置。所以我使用以下方法

@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Fix for Chrome / Safari Users ONLY */

.l-triangle {
   background: transparent url('../images/menu_bg_left.gif') no-repeat;
   position: absolute;
   float: left;
   width: 55px;
   height:75px;
   display: block;
   left: 0px;
   top:0px;
   z-index: 0;
    -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
       -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
            box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
}

它适用于屏幕尺寸大于 968 像素但不适用于小于 968 像素的 Chrome 浏览器。

我的问题是如何才能为只有2 个不同屏幕尺寸的Chrome 浏览器传递 2 个不同的 css 值？

Answer 1

我想你在这里也有同样的问题。

此代码仅适用于 Chrome：

.chrome #thingie {
   do: this;
}

我希望这会对你有所帮助。

Answer 2

您可以在媒体查询中使用“and”或“not”等运算符。

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 968px) {
...code here...
}