多媒体查询不起作用

我有点困惑，因为我习惯使用媒体查询来做一些CSS ......我从来没有遇到过这个问题。只有第一个媒体查询工作良好...我有几个媒体查询上具体尺寸如下工作：多媒体查询不起作用

/* - IPAD LANDSCAPE - */ 

@media screen and (max-width: 1024px) and (orientation: landscape){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 24vw top 3.5vh, right 21vw top 1vh; 
    } 
    header object{ 
    left:16vw; 
    width:18vw !important; 
    } 
    header p{ 
    font-size:14px; 
    top:16vh; 
    left:-2vw; 
    } 
} 

/* - IPAD PORTRAIT - */ 

@media screen and (max-width: 768px) and (orientation: portrait){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 28vw top 3.5vh, right 17vw top 1vh; 
    } 
    header object{ 
    left:10vw; 
    width:24vw !important; 
    } 
    header p{ 
    font-size:20px; 
    top:10vh; 
    left:-2vw; 
    } 
} 

/* - PHONE LANDSCAPE - */ 

@media screen and (max-width: 750px) and (orientation: landscape){ 
    /*...*/ 
} 

/* - PHONE PORTRAIT - */ 

@media screen and (max-width: 450px) and (orientation: portrait){ 
    /*...*/ 
}

我有和没有orientation参数试过......我甚至无法弄清楚，为什么我的代码没有帮助:-)成效良好我看了这几个主题，但它并没有帮助我...

感谢

编辑：

我米首次使用Bootstrap，是否会改变媒体查询中的某些内容？

编辑2：

我看到的东西像@media screen and (max-width:screen-sm-max)当我们使用引导程序，我应该用它来代替px价值？我认为这将仍然是相同的......

来源

2016-06-07 triskheal

[jsfiddle.net]（http://jsfiddle.net）示例？ – Coops

媒体查询订单也很重要，因此请根据您的要求进行检查和安排。 –

我正在研究一个巨大的代码，我无法真正重现同一件事......但是也许你知道它是否是一个“背景大小”的调整大小问题？或当我编辑引导问题？我会尽量代码[jsfiddle.net]类似的代码（https://jsfiddle.net/） @KaushalSuthar：我认为这是最大宽度第一，然后别人是因为过去的媒体查询具有更好的优先 – triskheal

尝试把最小@media查询的码元宽度块第一。

/* - PHONE PORTRAIT - */ 
@media screen and (max-width: 450px) and (orientation: portrait){ 
    /*...*/ 
} 

/* - PHONE LANDSCAPE - */ 
@media screen and (max-width: 750px) and (orientation: landscape){ 
    /*...*/ 
} 

/* - IPAD PORTRAIT - */ 
@media screen and (max-width: 768px) and (orientation: portrait){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 28vw top 3.5vh, right 17vw top 1vh; 
    } 
    header object{ 
    left:10vw; 
    width:24vw !important; 
    } 
    header p{ 
    font-size:20px; 
    top:10vh; 
    left:-2vw; 
    } 
} 

/* - IPAD LANDSCAPE - */ 
@media screen and (max-width: 1024px) and (orientation: landscape){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 24vw top 3.5vh, right 21vw top 1vh; 
    } 
    header object{ 
    left:16vw; 
    width:18vw !important; 
    } 
    header p{ 
    font-size:14px; 
    top:16vh; 
    left:-2vw; 
    } 
}

它为我解决了这类问题。 Boostrap doc也遵循这种结构。（这里@屏幕-SM-分钟是可以设置谢少/ SASS变量，但你不能用固定数量的更换）

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }

我个人使用类似的东西，如果它可以帮助你：

@media (max-width:767px) {} 

@media (max-width:767px) and (orientation:landscape) {} 

@media (min-width:768px) and (max-width:991px) {}

来源

2016-06-07 14:19:46

我尝试了两次，现在我只是再试一次，它不起作用......我只是删除了orientation参数，仍然是这样：/ min-width是否改变了很多代码解释？ – triskheal

重要的是保持相同甚至更严格的选择。你不能让header.myheader＃myheader {display：block}并期待你的@media queriesxxxx {header {display：none; }}的作品。由于更具体的选择器，header.myheader将覆盖标题。复制/粘贴相同的CSS选择器。请记住，靴子也可以重写你的CSS。 –

我的选择器都是一样的。是的，这是我的编辑帖子上的问题：引导编辑媒体查询？如果是的话，为什么我的媒体查询1024像素运行良好，但不是其他人？同样，如果我在媒体查询中首先或最后一次将代码放在我的代码中... – triskheal

多媒体查询不起作用

回答

相关问题