html - 响应式网站和媒体查询

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 元素，以便它完全按照我想要的方式显示，例如，通常我想覆盖 @media (min-width:640px) 和 (max- width:960px) 由针对屏幕 768 的 css @media (min-width:768px)

目前它仍然显示我的盒子是红色的，而它应该是红色的，我不确定 css 是如何编译的我在第二次媒体查询之后定义了它，这样它就会超过它。

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

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

更新:

我不确定我从 fiddle 复制粘贴的 @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调整屏幕浏览器的大小以查看预览。