html - 发出自动调整主标题文本大小的问题

Question

我正在更新托管在 Squarespace 上的咨询网站我的标题有大小问题(它不响应浏览器大小)

Here is the link to the webpage

如果您调整页面大小，您会看到“电子商务未调整大小以适合屏幕”字样。

我尝试添加一些自定义 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。我很确定设备宽度是指整个屏幕尺寸，而宽度将仅指浏览器视口(viewport)尺寸。试试这个:

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