Question

我需要帮助调整div内部的字体大小。因此，当我调整浏览器窗口大小时，它会变为较小的字体。

我无法更改html字体或正文字体，因此解决方案必须以特定div内的h1为目标。我打开了媒体查询解决方案，甚至是js 我已经尝试了所有其他类似的问题和答案，没有解决方案。任何帮助将不胜感激。谢谢！

HTML：

<div class="sharesmenu">
             <h1>Jake's Shares</h1>  
 </div>

CSS：

@media screen only (max-width:1405px) {
    .sharesmenu h1 { font-size:1em; }
}

@media screen only (min-width: 1406px) {
     .sharesmenu h1  { font-size:2.2em; }
}

Answer 1

您正在错误地调用媒体查询。

您以错误的方式调用了only screen，并且您也错过了and联接，它告诉浏览器检查多个变量。

＆＃13;

@media only screen and (max-width: 600px) {
  .sharesmenu h1 {
    font-size: 1em;
  }
}
@media only screen and (min-width: 601px) {
  .sharesmenu h1 {
    font-size: 2.2em;
  }
}

＆＃13;

<div class="sharesmenu">
  <h1>Pepe Corse</h1> 
</div>

＆＃13;

JSFiddle

Answer 2

尝试使用此代替CSS中的CSS，然后调整浏览器的大小。：

@media (max-width:1405px) {
    h1 { 
        font-size:1em; 
    }
}

@media (min-width: 1406px) {
    h1 { 
        font-size:2.2em; 
    }
}

调整浏览器窗口大小时，Inner Div字体大小不会随媒体查询而改变

2 个答案: