Question

我有这样的css代码：

@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
}

然而，我的电脑（1600）拿起1300-1500的媒体代码。某事（可能是愚蠢的）是错误的。

非常感谢您的意见。

Answer 1

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

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

Answer 2

当我使用媒体查询时，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和媒体查询中使用完整路径。

CSS - 响应式设计 - 媒体屏幕

2 个答案: