0

I have a css code like this:

@charset "utf-8";
/* long code  just an example of top */
     .show_hide_top a.showLink {        /* small red link */
     left: 39% !important;
     padding-left: 8px;
     top: 15% ;
     }


@media only screen and (min-width: 1300px) and (max-width:1500px) { 
     /* long code for these devices ex: */
 .show_hide_top a.showLink {      
    left: 39% !important;
    padding-left: 8px;
    top: 18% ;
    }
}
@media only screen and (min-width: 769px) and (max-width:1299px) {     
      code for these devices
}

@media only screen and (min-width:481px) and (max-width: 768px) {
      code for these devices
}

However, my computer (1600) picks up the media code for the 1300-1500. Something (probably silly) is wrong.

Thank you so much for your opinion.

4

2 回答 2

1

像这样的媒体查询不以设备为目标，它们以浏览器视口的宽度为目标，以像素为单位。@media only screen and (min-width: 1300px) and (max-width:1500px)因为您的浏览器的视口在 1300 像素宽和 1500 像素宽之间，所以被选中。

为了更好地展示这个想法，请尝试调整浏览器窗口的大小并观察正在应用和删除的不同媒体查询。

于 2013-10-09T16:09:50.990 回答
-1

当我使用媒体查询时，firefox 无法识别像 #upper 这样的通用 ID。

例子：

<div id="container">
   <div id='left"> content here </div>
   <div id="center">
      <div id="upper"> content here </div>
      ...
   </div>
   <div id="right">content here </div>
</div>

在 CSS 中定位 #center #upper 后，媒体查询仅适用于目标媒体，而不是一般规则。

只有#upper？不...它正在为所有设备读取和应用媒体查询，覆盖通用 CSS。

起初，在 min-devide-width 和 min-width 之间切换似乎可行，但问题仍然存在。所以这是永久修复。

确保在通用 CSS 和媒体查询中都使用完整路径。

于 2013-10-17T17:16:50.413 回答