Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
•
0 likes•264 views
Адаптируем макеты его под различные устройства.
Предсказуемый Viewport, Вопиловский Константин, KamaGames Studio, MoscowJs 33
- 2. ? 2 Зачем
- 5. Размер 5
- 6. Расстояние 6
- 8. Нам нужно больше макетов 8
- 9. 9 Нет, нам нужна оптимизация
- 10. 10 Практика
- 11. desktop compact mobile 11 var templateType = ...
- 12. 12
- 13. userAgent 13
- 15. var templateType = “mobile” Viewport ? 15
- 16. Viewport 16 ➔ <meta name="viewport" ...> ➔ @viewport {...} ➔ или не указывать
- 18. <meta content="width=device-width" …> 18 device-width (css width): 320, 346, 360, 390, 400, 504, …
- 19. Не всякая резина одинаково полезна 19
- 20. То маленький, то большой 20
- 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 Итого: