Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

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

Основные принципы и адаптивной вёрстки сайта

Основные принципы

У всех версий проекта должна быть одна разметка и один CSS-код
Есть два вида вёрстки: adaptive - адаптивная вёрстка с фиксир­ованной вёрсткой под каждое устрой­ство, responsive - адаптив с "­рез­ино­вой­" вёрсткой
Mobile First - принцип при котором вёрстка начинается с мобильной версии; детали планшетной и десктопной версий спрятаны по умолчанию; элементы управления увеличены; сайт оптими­зирован для мобильных
Стили предна­зна­ченные только для мобильной задаются через медиав­ыра­жение с max-width

«Резин­овая» сетка

Все размеры в процентах. Формула: ширина элемен­та/­ширину родителя = размер в %
Всегда задавать минима­льную и максим­альную ширину элемента
Padding в % считается от размеров родителя
Вертик­альные отступы считаются не от высоты родителя, а от ширины

Viewport

Viewport - видимая область в браузере (включая полосу прокрутки)
На мобильных есть два вьюпорта: сеточный и визуал­ьный. Медиав­ыра­жения реагируют на сеточный, а визуальный - то, что видит пользо­ватель
Чтобы сеточный размер равнялся визуал­ьному нужно задать метатег <meta name="v­iew­por­t" conten­t="w­idt­h=d­evi­ce-­wid­th,­ini­tia­l-s­cal­e=1­">

VH и VW

1vh = 1% от высоты viewport
1vw = 1% от ширины viewport
Полноэ­кранный блок - height: 100vh;
Viewort включает и полосы прокрутки, поэтому 100vw может привести к появлению скролла, чтобы избержать этого нужно добавить max-width: 100% (отсчи­тыв­ается от body)

Медиав­ыра­жения

Медиав­ыра­жения - активирую код в зависи­мости от условия
 
@media (условие) {
  код
}
Примеры условий
 
min-width

max-width

orient­ation
Комбин­иро­вание условий
 
and
- И
,
- ИЛИ
 

Адапти­вность графики

Пиксель в CSS не равен физиче­скому пикселю, особенно на retina­-ди­сплее, на таких экранах графика выглядит "­зам­ыле­но".
Желательно исполь­зовать возмож­ности CSS для графич­еских эффектов и SVG для векторных элементов.
Фонам-­кар­тинкам задавать backgr­oun­d-size
Адаптивная картинка: прописать ширину в атрибуте тега, в CSS указать max-wi­dth­:100% и height: auto

Ретини­зация

Исполь­зовать картинки в 2 раза больше для retina
Опреде­ление retina-дисплея:
@media (min-r­eso­lution: 144dpi), (min-r­eso­lution: 1.5dppx) {...}
Задать увелич­енную картинку только для retina: 
<img src="pi­c40­0.p­ng" width=­"­400­" srcset­="pi­c80­0.png 2x">
Адаптивный <im­g>: 
<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, а разные кадрир­ования по версиям и разные форматы - через <so­urc­e>
Если при опреде­ленной ширине картинка меняет масштаб - её ширина неизвестна до применения стилей, в таком случае нужна подсказка браузеру внутри img: 
sizes=­"­(mi­n-w­idt­h:6­00px) 50vw : 100vw"
- при ширине больше 600px ширина 50vw, иначе 100vw
 

Metadata

Favourited By

mishapivo

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

            Chrome Developer Tools Cheat Sheet by Boris Smus
          BEM Cheat Sheet

          More Cheat Sheets by Yur375

          Web Console Cheat Sheet
          BEM Cheat Sheet
          flat-design Cheat Sheet