Как создать: респонсивный текст
- Предыдущая страница Список без маркеров
- Следующая страница Тени текста
Узнайте, как использовать CSS для создания респонсивного форматирования.
Hello World
Измените размер окна браузера, чтобы увидеть, как изменяется размер шрифта.
Респонсивный размер шрифта
Размер текста можно изменить с помощью vw
Единицы измерения, означающие «ширина видимой области».
Таким образом, размер текста будет следовать за размером окна браузера:
<h1 style="font-size:8vw;">Hello World</h1> <p style="font-size:2vw;">Измените размер окна браузера, чтобы увидеть, как изменяется размер шрифта.</p>
Примечание:видимая область — это размер окна браузера.1vw
= 1% от ширины видимой области. Если ширина видимой области 50 см, то 1vw
в 0,5 см.
Изменение размера шрифта с помощью медиа-запросов
Вы также можете использовать медиа-запросы для изменения размера шрифта элементов на определенном экране:
Изменяемый размер шрифта.
/* Если ширина экрана составляет 601px или больше, установите размер шрифта <div> в 80px */ @media screen and (min-width: 601px) { div.example { font-size: 80px; } } /* Если ширина экрана составляет 600px или меньше, установите размер шрифта <div> в 30px */ @media screen and (max-width: 600px) { div.example { font-size: 30px; } }
Связанные страницы
Учебник:CSS шрифты
Учебник:CSS медиа-запросы
- Предыдущая страница Список без маркеров
- Следующая страница Тени текста