Изменение размера шрифта HTML на разный размер экрана

Question

У меня есть сайт markedsføring på pizzabakker, и я просто не могу понять, как изменить <h1> на меньшие экраны. Может ли кто-нибудь помочь мне в этом?

Мой CSS для <h1> сейчас только это:

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 рамки для создания гибких мобильных первых проектов в Интернете.

Answer 3

Другие решения правы, но вы также можете попробовать с этим. Измените текущий код CSS на 5vw, что означает, что он автоматически вычислит 5/100-ю ширину окна просмотра.

h1 { 
    font-size: 5vw; 
}