Cheatography
https://cheatography.com
Основные принципы и адаптивной вёрстки сайта
Основные принципы
У всех версий проекта должна быть одна разметка и один CSS-код |
Есть два вида вёрстки: adaptive - адаптивная вёрстка с фиксированной вёрсткой под каждое устройство, responsive - адаптив с "резиновой" вёрсткой |
Mobile First - принцип при котором вёрстка начинается с мобильной версии; детали планшетной и десктопной версий спрятаны по умолчанию; элементы управления увеличены; сайт оптимизирован для мобильных |
Стили предназначенные только для мобильной задаются через медиавыражение с max-width |
«Резиновая» сетка
Все размеры в процентах. Формула: ширина элемента/ширину родителя = размер в % |
Всегда задавать минимальную и максимальную ширину элемента |
Padding в % считается от размеров родителя |
Вертикальные отступы считаются не от высоты родителя, а от ширины |
Viewport
Viewport - видимая область в браузере (включая полосу прокрутки) |
На мобильных есть два вьюпорта: сеточный и визуальный. Медиавыражения реагируют на сеточный, а визуальный - то, что видит пользователь |
Чтобы сеточный размер равнялся визуальному нужно задать метатег <meta name="viewport" content="width=device-width,initial-scale=1"> |
VH и VW
1vh = 1% от высоты viewport |
1vw = 1% от ширины viewport |
Полноэкранный блок - height: 100vh; |
Viewort включает и полосы прокрутки, поэтому 100vw может привести к появлению скролла, чтобы избержать этого нужно добавить max-width: 100% (отсчитывается от body) |
Медиавыражения
Медиавыражения - активирую код в зависимости от условия |
@media (условие) {
код
}
|
Примеры условий |
min-width
max-width
orientation
|
Комбинирование условий |
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>
<source
type="image/webp"
media="(min-width: 960px)"
srcset="img/picture-large.webp 2x,
img/picture-small.webp 1x">
...source для каждой картинки...
<img src="img/mobile-small.jpg">
</picture> |
Ширину в srcset можно задавать в формате srcset="a.png 300w, b.png 600w, c.png 900w" |
Если разное качество картинки (ретина/не ретина) задавать через srcset, а разные кадрирования по версиям и разные форматы - через <source> |
Если при определенной ширине картинка меняет масштаб - её ширина неизвестна до применения стилей, в таком случае нужна подсказка браузеру внутри img: sizes="(min-width:600px) 50vw : 100vw" - при ширине больше 600px ширина 50vw, иначе 100vw |
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by Yur375