Question

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

     @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; }

Answer 1

max-devicewidth中有拼写错误。

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

编辑：

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

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

Answer 2

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

 h2{
        font-size: 4.3vw;
    }

}

Responsive Font Size

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

2 个答案: