在不同的屏幕尺寸上更改字体大小的HTML

Question

我有网站markedsføring på pizzabakker，我无法弄清楚如何在较小的屏幕上将<h1>更改为更小。谁能帮帮我呢？

我现在的<h1>的CSS就是这样：

font-family:'Coustard', sans-serif;
margin:0;
padding:0;
font-weight:300;

我该怎么办？

Answer 1

Matteo的代码是正确的。尝试将代码放在原始h1样式之后。 如果这没有帮助，请尝试：

@media screen and (max-width:360px){
    h1{
        color:white;
        font-size:25px !important;
    }  
}

Answer 2

您可以使用媒体查询。

  

@media规则用于为不同的媒体类型/设备定义不同的样式规则。   在CSS2中，这被称为媒体类型，而在CSS3中，它被称为媒体   查询。

这是一个例子

@media screen and (max-width:360px){
    h1{
        color:white;
        font-size:25px;
    }  
}

有关信息，请参阅this。

要开发自适应网站，我还建议您查看Bootstrap

  

Bootstrap是最流行的HTML，CSS和JS框架，用于在Web上开发响应式移动优先项目。

Answer 3

其他解决方案是正确的，但你也可以试试这个。改变当前的CSS代码，使其具有5vw单位，这意味着它将自动计算视口宽度的5/100。

h1 {
  font-size: 5vw;
}