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

1. Вопиловский Константин
KamaGames Studio
Предсказуемый
Viewport

2. ?
2
Зачем

3. Вот зоопарк
3

4. Плотность пикселей
4

5. Размер
5

6. Расстояние
6

7. Устройства ввода
7

8. Нам нужно больше макетов
8

9. 9
Нет, нам нужна оптимизация

10. 10
Практика

11. desktop compact mobile
11
var templateType = ...

12. 12

13. userAgent
13

14. mobile compact desktop
14
A B

15. var templateType = “mobile”
Viewport ?
15

16. Viewport
16
➔ <meta name="viewport" ...>
➔ @viewport {...}
➔ или не указывать

17. <meta name="viewport">
content="width=device-width"
content="width=360px"
17

18. <meta content="width=device-width" …>
18
device-width (css width):
320, 346, 360, 390,
400, 504, …

19. Не всякая резина одинаково полезна
19

20. То маленький, то большой
20

21. <meta name="viewport" content="width=360px">
21

22. <meta name="viewport" content="width=360px">
22
Неадекватное поведение браузеров

23. 23
<meta name="viewport" content="width=360px">
● меняем width в зависимости от ориентации
● элементы c {overflow: scroll}
● часто по клику появляется лупа
● итд

24. ?
24

25. rem
25

26. “pxrem”
26

27. #!/bin/bash
px2rem2px index.css > index.css
27

28. rem
28

29. font-size: calc(100vw / 360)
1px == 1rem
29

30. font-size: calc(100vw / 360)
1px == 1rem
100 100100
30
100
400

31. font-size: calc(1000vw / 360)
10px == 1rem
31

32. .-viewport-mobile-landscape: font-size: calc(1000vw / 520)
.-viewport-mobile-portrait: font-size: calc(1000vw / 360)
32

33. .-viewport-tablet-landscape: font-size: calc(1000vw / 980)
.-viewport-tablet-portrait: font-size: calc(1000vw / 640)
calc(1000vw / 800)
calc(1000vw / 600)
33

34. Возможные проблемы
- если виртуальный “px” меньше физического
- не забываем про javascript
- интеграция с внешними виджетами
- это хак ...
34

35. .-viewport-desktop: font-size: 10px
.-viewport-tablet-landscape: font-size: calc(1000vw / 980)
.-viewport-tablet-portrait: font-size: calc(1000vw / 640)
.-viewport-mobile-landscape: font-size: calc(1000vw / 520)
.-viewport-mobile-portrait: font-size: calc(1000vw / 360)
35
Итого:

36. Спасибо!
вопросы ?
36
Вопиловский Константин
https://github.com/vflash