Читаем онлайн «Как сделать сайт адаптивным: полезные советы»

2

Содержание

Адаптивный дизайн. Что это такое и почему его нужно использовать

3

Что такое RWD

3

Адаптивные макеты

4

Гибкий макет на основе сетки (Mostly Fluid)

4

Макет Shifter

5

Колонка Drop

5

Off Canvas

6

Твики

6

Адаптивная навигация

6

Фиксированная панель или “ничего не делай” подход

6

Футер

7

Off-canvas навигация

7

Адаптивная типографика

7

Гибкие изображения

8

max-width: 100%;

9

srcset

9

<picture>

10

Выбор правильного формата

10

JPG или JPEG

10

SVG

10

PNG

11

GIF

11

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

11

Пример

12

HTML

12

HTML5.js

13

CSS

13

Масштабируемые встроенные видео

15

Сжатие

16

Минификация

16

GZIP

16

3

Адаптивный дизайн. Что это такое и почему его нужно использовать

Если вы считаете, что адаптивность слишком проста, у меня есть для вас новости.

Существует 99 экранов и iPhone только один из них.

— Джош Брюэр, 10 марта 2010

Во времена, когда мобильные устройства не были так распространены, а мобильный просмотр

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