Адаптивная вёрстка

Август 6, 2022

Главная
Информатика
Адаптивная вёрстка

Содержание

2. Медиа - запросы
3. Под адаптивной вёрсткой понимают такой способ создания страниц, когда для разных устройств применяются разные стили. Страница
4. Медиа-запросы в CSS применяются для того, чтобы определить, в каком именно типе устройств будут применяться стили.
5. Узконаправленные запросы позволяют определить стили только для определенных параметров. Параметры обычно записываются в скобках. Чаще всего
6. Для адаптивной верстки используется медиа-запрос screen с указанием размеров. Для того, чтобы работали несколько медиа-запросов используется
7. По умолчанию мобильные браузеры сканируют страницу таким образом, чтобы вся страница попадала целиком, тем самым игнорируя
8. Данный принцип рекомендует начинать прописывать стили сначала для устройств с наименьшим размером экрана по нарастающей.
9. @media screen and (max-width: 320px) {} @media screen and (min-width: 320px) and (max-width: 480px) {} @media
11. Скачать презентацию

Слайд 2

Медиа - запросы

Слайд 3

Под адаптивной вёрсткой понимают такой способ создания страниц, когда для разных

устройств применяются разные стили.
Страница адаптируется под устройства, отсюда и название.
Адаптивная верстка является современным стандартом разработки страницы, из-за распространенности мобильных устройств (смартфонов, планшетов, ноутбуков с нестандартными экранами).

Адаптивная верстка

Слайд 4

Медиа-запросы в CSS применяются для того, чтобы определить, в каком именно

типе устройств будут применяться стили.
Типы устройств:
aural, braille, handheld, print, projection, screen, tty, tv
Для установки медиа-запросы используется команда @media

Медиа-запросы

Слайд 5

Узконаправленные запросы позволяют определить стили только для определенных параметров. Параметры обычно

записываются в скобках.
Чаще всего используются диапазоны, с префиксами max- и min-
@media (max-width: 1500px) { ... }
Стили будут применяться для устройств с view-port с максимальным значением 1500px

Слайд 6

Для адаптивной верстки используется медиа-запрос screen с указанием размеров.
Для того, чтобы

работали несколько медиа-запросов используется команда and
@media screen and (max-width: 1400px)

Слайд 7

По умолчанию мобильные браузеры сканируют страницу таким образом, чтобы вся страница

попадала целиком, тем самым игнорируя реальные размеры устройства.
Для того, чтобы управлять этим поведением используют мета-тег viewport

Слайд 8

Данный принцип рекомендует начинать прописывать стили сначала для устройств с наименьшим

размером экрана по нарастающей.

Слайд 9

@media screen and (max-width: 320px) {}
@media screen and (min-width: 320px) and

(max-width: 480px) {}
@media screen and (min-width: 480px) and (max-width: 768px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
@media screen and (min-width: 1024px) {}