响应式网站和媒体查询

Question

我正在使用如下媒体查询

@media (min-width:100px) and (max-width:639px)  
{
}
@media (min-width:640px) and (max-width:960px)  
{
    .box  {background-color:red;}
}
@media (width:768px)
{
    .box  {background-color:green; }
}
@media (min-width:961px)
{
}

我想专门针对屏幕 768 像素的某些 div 元素，以便它完全按照我想要的方式显示，例如，一般我想用针对屏幕 768 @media (min-width:768px) 的 css 覆盖在 @media (min-width:640px) and (max-width:960px) 中定义的 css

目前它仍然显示我的盒子是红色的，而它应该是红色的，我不确定 css 是如何编译的，我在第二个媒体查询之后定义了它，以便它会覆盖它。

如何使用特定设备的媒体查询来定位特定元素

示例：http://jsfiddle.net/X43Et/

更新：

我不确定它到底出了什么问题，我从小提琴中复制粘贴了@media (width:768px) { 部分，它在我的实际页面中有效。 可能是一些看不见的拼写错误..

Answer 1

这只是媒体查询的一个示例您可能希望在媒体查询之前拥有正常的 css

#gallery-1 img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
    #gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
    #gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
    #gallery-1 img {width:540px;}
}

当您使用媒体查询时，您希望指定您想要的屏幕大小，因此您在@media 之后使用screen。我希望这是您正在寻找的内容，并且对您有所帮助！

这是我制作的一个小示例脚本

<style>
#box {
    width: 500px;
    height: 200px;
    background: yellow;
    border: 1px solid #000;
}
@media screen and (max-width:1000px) {
    #box { background: red; }
}
@media screen and (min-width:1000px) and (max-width:1200px) {
    #box { background: green; }
}
@media screen and (min-width:1200px) and (max-width:1400px) {
    #box { background: blue; }
}
</style>
<div id="box">

</div>

在 JSFiddle 上，屏幕尺寸不是整个屏幕，它是预览所在的小框，因此您需要将尺寸变小才能看到效果，这里是 DEMO 调整屏幕浏览器大小以查看预览。