为什么此字体大小在媒体查询中不起作用

时间:2016-10-11 12:42:38

标签: html css

我有媒体查询,但在一种情况下,字体大小无效

     @media only screen and (min-device-width: 375px) and (max-devicewidth:     667px)  
{ 
#topnav             {   padding:0px 0px 0px 0px;}
#topnav a           {   font-size:28px;}
#topnav h1          {   font-size:55px;}
#content            {   float:left;width:100%;margin: 20px 0px  0px 0px;  }
#content p          {   font-size:25px; color: #AAAAAA;text-align:justify;padding:0px 20px 10px 20px; }
#content h1         {   font-size:40px; color: #AAAAAA;line-height:140%;padding:0px 20px 0px 20px;text-align:center; }

2 个答案:

答案 0 :(得分:1)

max-devicewidth中有拼写错误。

您应该在浏览器中检查您的#content p元素,并查看它所采用的字体大小属性的css文件中的哪一行,您可能会在某处覆盖它。

编辑:

如何检查:如果使用chrome,右键单击元素,单击inspect。您将html页面作为节点,您可以在其中导航。确保单击要检查的元素,然后查看应用的样式

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

答案 1 :(得分:0)

@media only screen and (max-width: 730px) {

 h2{
        font-size: 4.3vw;
    }

}

Responsive Font Size