Question

我正在更新Squarespace上托管的咨询网站，我正在调整标题的大小问题（它不会对浏览器大小做出响应）

如果您调整页面大小，您会看到电子商务这个词没有调整大小以适应屏幕。

我尝试添加一些自定义css，但效果不佳

 @media screen 
 and (min-device-width: 751px) 
 and (max-device-width: 1110px)
{
  #introduction .sqs-block-content h1{
  font-size:100px; 
 }
}
 @media screen 
 and (max-device-width: 750px) 
{ 
 #introduction .sqs-block-content h1{
 font-size:100px; 
 }
}

我已经从网站上删除了代码。

你们有没有想过如何根据使用CSS的浏览器大小调整主要文本大小？

Answer 1

我认为你走的是正确的道路，但出于某种原因决定使用*-device-width而不仅仅是*-width。我很确定设备宽度是指整个屏幕尺寸，而宽度仅指浏览器视口大小。试试这个：

@media screen and (min-width: 751px) and (max-width: 1110px)
{
  #introduction .sqs-block-content h1{ font-size:100px; }
}

@media screen and (max-width: 750px) 
{ 
   #introduction .sqs-block-content h1{ font-size:100px; }
}

Answer 2

对于仍然有同样问题的人，我建议使用fittext插件。

非jQuery独立版本exists

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

问题会自动调整主标题文本的大小

2 个答案: