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) and (max-width:960px)中定义的css，其目标是屏幕768 {{1 }}

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

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

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

更新：

我不确定它究竟出了什么问题。我把小册子@media (min-width:768px)部分从小提琴＆amp;它适用于我的实际页面。可能是一些看不见的拼写错误..

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

当您使用媒体查询时，您希望指定所需的屏幕大小，以便在screen之后使用@media。我希望这是你所寻找的，并会帮助你！

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

<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调整屏幕浏览器的大小看预览。

响应式网站和媒体查询

1 个答案: