CSS：@media查询的最大宽度在某些div标签上不起作用

Question

  

最大宽度：700像素在id =“ wrap2”中不起作用

     

但是使用id =“ wrapper”可以正常工作。 （现在有评论）

<style type="text/css">
@media (max-width: 700px) {
  /*#wrapper {
display: none;
}*/
  #wrap2{
    display: none;
  }
}
</style>

<div id="wrapper">
<div style="display: inline; float: left;">
   A
</div>


<div style="display: inline; float: right;" id="wrap2">
 B
</div>
</div>

Answer 1

因为您使用的是嵌入式CSS。您可以使用!important更改内联属性。

@media (max-width: 700px) {
  #wrap2{
    display: none !important;
  }
}

<div id="wrapper">
<div style="display: inline; float: left;">
   A
</div>

<div style="display: inline; float: right;" id="wrap2">
 B
</div>
</div>

Answer 2

如果您使用外部CSS而不是内联，然后将此文件包含在html中，那么它将起作用。