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

Posted 2023-03-06

【中文标题】仅在 Chrome 上定位两种屏幕尺寸

【英文标题】：Target two screen sizes on Chrome only

【发布时间】：2013-02-06 03:44:06

【问题描述】：

我正在使用@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 值？

【问题讨论】：

也许查看Twitter Bootstrap 的五个responsive-*.less 文件会给您一些指示。尽管在 LESS 中，@media 查询仍然是标准 CSS。

【参考方案1】：

我认为你有同样的问题here。

此代码仅适用于 Chrome：

.chrome #thingie 
   do: this;

希望对你有帮助。

【参考方案2】：

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

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