我正在使用如下媒体查询
@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 是如何编译的我在第二次媒体查询之后定义了它,这样它就会超过它。
如何使用针对特定设备的媒体查询来定位特定元素
更新:
我不确定我从 fiddle 复制粘贴的 @media (width:768px) {
部分到底出了什么问题,它在我的实际页面中有效。
可能是一些看不见的拼写错误..
最佳答案
这只是媒体查询的一个示例您可能希望在媒体查询之前拥有普通的 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调整屏幕浏览器的大小以查看预览。
关于html - 响应式网站和媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23757451/