Почему я не могу заставить проценты работать для font-size
В последнее время я делаю шаблоны веб-сайтов или практикую 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>Большое спасибо за любую помощь !!!
Вы можете использовать 'vw', см. Верхний ответ здесь: stackoverflow.com/questions/16056591/…
Вы пытаетесь изменить размер h1, весь текст, включая H1-H6, имеет определенный размер шрифта, когда вы пытаетесь изменить размер шрифта, используя%, например, h1 hvae font-size 26 пикселей, когда вы используете размер шрифта в % он увеличится до 26 пикселей, если вы укажете размер шрифта как 200%, тогда размер шрифта будет 52 пикселей;
@PankajJaiswal Нет, это размер относительно родительского элемента. Если H1 обычно составляет 26 пикселей, то если задать ему font-size: 100%, получится 13 пикселей.
Ответы 2
Используйте Viewport Width или Viewport Height
font-size:100vw; (100% ширина области просмотра)
или
font-size:100vh; (100% высота области просмотра)
Это не отвечает на вопрос из заголовка. Почему не работают проценты?
Если вы используете процентное отношение к размеру шрифта ваших элементов, это относительно размера шрифта, определенного в html. Таким образом, даже при изменении размера окна ваш размер шрифта остается того же размера. Обычный размер шрифта html составляет 16 пикселей, поэтому, если у вас есть h1 с font-size: 200%, независимо от размера окна, у h1 font-size будет 32 пикселя.
Для изменения размера шрифта с изменением ширины окна используйте vw. Таким образом ваш размер шрифта становится динамическим.
Как это: h1 { font-size: 15vw }. Это означает, что если ширина окна составляет 200 пикселей, ваш размер шрифта будет 30 пикселей;
100vw == 100% ширины
1vw == 1% ширины.
Процент указан в процентах от размера шрифта. Если размер шрифта 12pt, 100% будет 12pt. То же самое для "1em"