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

【问题标题】：CSS - responsive desidgn - media screenCSS - 响应式设计 - 媒体屏幕
【发布时间】：2013-10-18 01:30:46
【问题描述】：

我有一个这样的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 的媒体代码。有些东西（可能是愚蠢的）是错误的。

非常感谢您的意见。

【问题讨论】：

1600 是指视口大小还是您的屏幕大小？您能否填写一个重现问题的示例小提琴？
屏幕尺寸。（免责声明 - 我是编程新手，我不确定有什么不同。我正在使用whatismyscreenresolution.com 谢谢你的提问。
好吧，那些媒体查询正在检查浏览器视口，而不是屏幕大小。如果这是目的，您应该尝试使用 min-device-width 和 max-device-width
成功了！我什至尝试过并将其注释掉，但我并没有用于所有级别。现在我在每一个层次上都写了，而且效果很好。谢谢！请把它作为答案。您介意解释一下视图大小和屏幕大小之间的区别吗？没什么大不了的，我可以找出来。非常感谢！
阅读 MDN 文档：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

标签： css responsive-design media-queries

【解决方案1】：

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

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

【讨论】：

其实测量的是视口，而不是浏览器窗口。该窗口将包括 chrome（如果存在）、工具栏、滚动条（这因浏览器而异：有些算，有些不算）等。视口是您正在查看的文档所在的浏览器部分。视口几乎总是小于显示器的分辨率（尤其是在浏览器窗口未最大化时）。
但是当我更改代码时，它改变了网站的外观。现在的问题是firefox没有响应它。只有 Chrome 和 IE。
@user2060451 似乎是一个不同的问题，不管我们需要查看实际样式，以及哪些具体没有应用于 Firefox 来调查问题。
@DanielImms 我在问题中发布了确切的问题。这是同样的问题。 Firebug 读取 1300-1500 媒体屏幕（第 XXXX 行）的那个。 IE 和 Chrome 控制台读取行 (YYYY)。我的意思是读取和显示。我一直在使用两种语法（设备和最小宽度）来回前进。也许我一直在不同的浏览器中进行测试，需要更加一致。比必要时修复。

【解决方案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 和媒体查询中都使用完整路径。

【讨论】：