Основные принципы и адаптивной вёрстки сайта
|
У всех версий проекта должна быть одна разметка и один CSS-код
|
|
Есть два вида вёрстки: adaptive - адаптивная вёрстка с фиксированной вёрсткой под каждое устройство, responsive - адаптив с "резиновой" вёрсткой
|
|
Mobile First - принцип при котором вёрстка начинается с мобильной версии; детали планшетной и десктопной версий спрятаны по умолчанию; элементы управления увеличены; сайт оптимизирован для мобильных
|
|
Стили предназначенные только для мобильной задаются через медиавыражение с max-width
|
|
Все размеры в процентах. Формула: ширина элемента/ширину родителя = размер в %
|
|
Всегда задавать минимальную и максимальную ширину элемента
|
|
Padding в % считается от размеров родителя
|
|
Вертикальные отступы считаются не от высоты родителя, а от ширины
|
|
Viewport - видимая область в браузере (включая полосу прокрутки)
|
|
На мобильных есть два вьюпорта: сеточный и визуальный. Медиавыражения реагируют на сеточный, а визуальный - то, что видит пользователь
|
|
Чтобы сеточный размер равнялся визуальному нужно задать метатег <meta name="viewport" content="width=device-width,initial-scale=1">
|
|
1vh = 1% от высоты viewport
|
|
1vw = 1% от ширины viewport
|
|
Полноэкранный блок - height: 100vh;
|
|
Viewort включает и полосы прокрутки, поэтому 100vw может привести к появлению скролла, чтобы избержать этого нужно добавить max-width: 100% (отсчитывается от body)
|
|
Медиавыражения - активирую код в зависимости от условия
|
@media (условие) { |
|
Примеры условий
|
min-widthmax-widthorientation |
|
Комбинирование условий
|
and - И, - ИЛИ |
|
Пиксель в CSS не равен физическому пикселю, особенно на retina-дисплее, на таких экранах графика выглядит "замылено".
|
|
Желательно использовать возможности CSS для графических эффектов и SVG для векторных элементов.
|
|
Фонам-картинкам задавать background-size
|
|
Адаптивная картинка: прописать ширину в атрибуте тега, в CSS указать max-width:100% и height: auto
|
|
Использовать картинки в 2 раза больше для retina
|
|
Определение retina-дисплея:
@media (min-resolution: 144dpi), (min-resolution: 1.5dppx) {...} |
|
Задать увеличенную картинку только для retina:
<img src="pic400.png" width="400" srcset="pic800.png 2x"> |
|
Адаптивный <img>:
<picture> |
|
Ширину в srcset можно задавать в формате srcset="a.png 300w, b.png 600w, c.png 900w"
|
|
Если разное качество картинки (ретина/не ретина) задавать через srcset, а разные кадрирования по версиям и разные форматы - через <source>
|
|
Если при определенной ширине картинка меняет масштаб - её ширина неизвестна до применения стилей, в таком случае нужна подсказка браузеру внутри img:
sizes="(min-width:600px) 50vw : 100vw" - при ширине больше 600px ширина 50vw, иначе 100vw |
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
