媒体查询样式不起作用

Question

由于某种原因，当我调整浏览器大小时或在移动设备上查看页面时，.headPhone 一直在右侧。我想取消浮动或添加一些边距，以便它以较小的显示为中心。我怎样才能做到这一点？

HTML

<div class="headDiv">
    <div class="headPhone">
        <p class="fa fa-phone fa-xlg">000000</p>
    </div>
</div><!--headDiv-->

CSS

.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}

@media (max-width: 768px) {
   .headDiv .headPhone {float:none; margin: 0 auto;}
}

Answer 1

浮动权是您的问题，它有点覆盖了 display: block; 的属性。我回答这个问题的印象是您希望 div 为全角。我添加了一些颜色用于检查。

.headDiv {
   display: block;
   max-width: 100%;
   background: yellow;
 }
 .headPhone {
   float: right;
   background: red;
 }


 @media (max-width: 768px) {
    .headDiv .headPhone {
      width: auto;
      float: none;
      margin: 0 auto;
    }
 }

Answer 2

您可以使用 display:table，这样 div 会自动缩小以适应内容。

http://jsfiddle.net/Lb7ky6vL/

@media (max-width: 768px) {
    .headDiv .headPhone {
        float: none;
        display: table;
        margin: 0 auto;
    }
}

媒体查询样式不起作用

Media Query styles not working

css

breakpoints

media-queries