Cheatography
https://cheatography.com
Основные принципы и адаптивной вёрстки сайта
Основные принципыУ всех версий проекта должна быть одна разметка и один CSS-код | Есть два вида вёрстки: adaptive - адаптивная вёрстка с фиксированной вёрсткой под каждое устройство, responsive - адаптив с "резиновой" вёрсткой | Mobile First - принцип при котором вёрстка начинается с мобильной версии; детали планшетной и десктопной версий спрятаны по умолчанию; элементы управления увеличены; сайт оптимизирован для мобильных | Стили предназначенные только для мобильной задаются через медиавыражение с max-width |
«Резиновая» сеткаВсе размеры в процентах. Формула: ширина элемента/ширину родителя = размер в % | Всегда задавать минимальную и максимальную ширину элемента | Padding в % считается от размеров родителя | Вертикальные отступы считаются не от высоты родителя, а от ширины |
ViewportViewport - видимая область в браузере (включая полосу прокрутки) | На мобильных есть два вьюпорта: сеточный и визуальный. Медиавыражения реагируют на сеточный, а визуальный - то, что видит пользователь | Чтобы сеточный размер равнялся визуальному нужно задать метатег <meta name="viewport" content="width=device-width,initial-scale=1"> |
VH и VW1vh = 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