Создание медиа-запроса
Медиа-запросы - это новый метод, введенный в CSS3, который изменяет представление контента на основе разных размеров видовых экранов. Окно просмотра - видимая область пользователя на веб-странице и отличается в зависимости от устройства, используемого для доступа к сайту. Медиа-запросы состоят из типа носителя, и если этот тип носителя соответствует типу устройства, на котором отображается документ, применяются стили. Вы можете иметь столько селекторов и стилей внутри вашего медиа-запроса, сколько хотите. Ниже приведен пример медиа-запроса, который возвращает содержимое, когда ширина устройства меньше или равна 100px: @media (max-width: 100px) { /* CSS Rules */ }
и следующий медиа-запрос возвращает содержимое, когда Высота устройства больше или равна 350px: @media (min-height: 350px) { /* CSS Rules */ }
Помните, что CSS внутри медиа-запроса применяется только в том случае, если тип материала соответствует типу используемого устройства.
Добавьте медиа-запрос, чтобы тэг p
имел font-size
10px, когда высота устройства меньше или равна 800px.