问题
This question already has an answer here:
- Nesting @media rules in CSS 1 answer
Hi guys I am currently creating my portfolio website in WordPress at www.yewtreeweb.co.uk. However I am having a problem with getting media queries to work in Internet Explorer 11.
When I add the media queries the style does not display in the inspect element console of Internet Explorer however BootStrap's media queries do appear. Is it something to do with WordPress or am I doing something wrong?
Also my styling does work if out of the media query.
@media screen and (min-width: 1024px){
@media screen and (min-width: 64.000em){
#imgholder-left{
padding-right: 0;
}
#imgholder-right{
padding-left: 0;
}
#leftimg > img {
width: 400px;
}
#rightimg > img {
width: 600px;
}
}
}
回答1:
instead
@media screen and (min-width: 1024px){
...
}
use this
@media all and (min-width: 1024px) {
...
}
回答2:
Although nested media queries are allowed in CSS3 (but not 2.1) I can imagine that this is exactly the sort of thing that has cross-browser issues.
I don't understand why you are testing min-width twice but consider putting them in the same query, comma-separated to signify an OR:
@media screen and (min-width: 1024px), screen and (min-width: 64.000em) {
//if *either* of these are matched then apply these rules
//...
}
来源:https://stackoverflow.com/questions/26059414/media-queries-not-working-in-internet-explorer-11