Question

我无法通过CSS mediaqueries解决子元素问题。如何设置下面示例中的列表元素，以获得大于800px的屏幕宽度？

HTML

  <ul class="navigation">
    <li></li>
    <li></li>
    <li></li>
  </ul>

CSS

   .navigation > li{ display: block; width: 10em; };

@media screen and (min-width: 800px) {

.navigation > li{ width: 20em; };
}

Answer 1

希望它能帮到你，在常规css代码之后添加媒体查询，

  @media only screen and (mix-width: 800px) {
           //add your css it may help you

 }

Answer 2

你应该在括号后摆脱分号。 Chrome不喜欢它们：

.navigation > li{ 
    display: block; 
    width: 10em; 
    background: red; 
    margin: 10px; 
}

@media screen and (min-width: 300px) {

    .navigation > li{ 
        width: 20em; 
    }

}

小提琴：http://jsfiddle.net/wQu9j/2/

CSS媒体查询不适用于子元素

2 个答案: