Почему я не могу заставить проценты работать на размер шрифта - PullRequest
Новая
       5

Почему я не могу заставить проценты работать на размер шрифта

0 голосов
/ 09 сентября 2018

В последнее время я делаю шаблоны сайтов или практикую CSS. Существует повторяющаяся проблема, когда процент ничего не делает, но создает заданный размер шрифта, который не изменится, когда я изменю размер окна. Я пытался буквально каждый пост на этом сайте для исправления процентов, но я не могу понять, как исправить этот размер шрифта. Вот мой код: 

body{
    background-color: #b74242;
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 100%;
}


html, body {
    padding: 0;
    margin: 0;
    font-size: 100%;
}

div{
    font-size: 100%;
}

.header{
    background-color: #bc2b2b;
    margin: 0;
    height: 100%;
    max-height: 70%;
    min-height: 70%;
    font-size: 100%;
}

h1{
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 550%;
    color: white;
    margin-top: 10%;
    margin-bottom: 20%;
}

.left{
    float: left;
    font-size: 100%;
}

img{
    margin: 25px;
    max-width: 45%;
    width: 2000px;
    height: auto;
    font-size: 100%;
}

p{
    font-size: 50%;
}

#d{
    margin: 25px;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed"
            rel="stylesheet">
        <title>Title</title>
    </head>
    <body>
        <div class="header">
            <br>
            <h1>Header</h1>
        </div>
        <img src="Trees.png" class="left"></img>
        <p style="font-size: 100%" id="d">DESCRIPTION</p>
    </body>
</html>

Большое спасибо за любую помощь !!!

Ответы [ 2 ]

0 голосов
/ 09 сентября 2018

Если вы используете процент от размера шрифта ваших элементов, это относительно размера шрифта, определенного в html. Таким образом, даже если размер окна изменится, размер шрифта останется прежним. Общий размер шрифта html составляет 16 пикселей, поэтому если у вас есть h1 с font-size: 200%, независимо от размера окна, h1 font-size будет иметь 32 пикселя.

Чтобы изменить размер шрифта при изменении ширины окна, используйте vw. Таким образом, ваш размер шрифта становится динамическим.

Вот так: h1 { font-size: 15vw }. Это означает, что если ширина окна равна 200px, размер шрифта будет равен 30px; 100vw == 100% ширины

1vw == 1% ширины.

0 голосов
/ 09 сентября 2018

Используйте Viewport Width или Viewport Height

font-size:100vw; (ширина окна просмотра 100%)

или

font-size:100vh; (100% высоты области просмотра)

...