Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Вопиловский Константин
KamaGames Studio
Предсказуемый
Viewport
?
2
Зачем
Вот зоопарк
3
Плотность пикселей
4
Размер
5
Расстояние
6
Устройства ввода
7
Нам нужно больше макетов
8
9
Нет, нам нужна оптимизация
10
Практика
desktop compact mobile
11
var templateType = ...
12
userAgent
13
mobile compact desktop
14
A B
var templateType = “mobile”
Viewport ?
15
Viewport
16
➔ <meta name="viewport" ...>
➔ @viewport {...}
➔ или не указывать
<meta name="viewport">
content="width=device-width"
content="width=360px"
17
<meta content="width=device-width" …>
18
device-width (css width):
320, 346, 360, 390,
400, 504, …
Не всякая резина одинаково полезна
19
То маленький, то большой
20
<meta name="viewport" content="width=360px">
21
<meta name="viewport" content="width=360px">
22
Неадекватное поведение браузеров
23
<meta name="viewport" content="width=360px">
● меняем width в зависимости от ориентации
● элементы c {overflow: scroll}...
?
24
rem
25
“pxrem”
26
#!/bin/bash
px2rem2px index.css > index.css
27
rem
28
font-size: calc(100vw / 360)
1px == 1rem
29
font-size: calc(100vw / 360)
1px == 1rem
100 100100
30
100
400
font-size: calc(1000vw / 360)
10px == 1rem
31
.-viewport-mobile-landscape: font-size: calc(1000vw / 520)
.-viewport-mobile-portrait: font-size: calc(1000vw / 360)
32
.-viewport-tablet-landscape: font-size: calc(1000vw / 980)
.-viewport-tablet-portrait: font-size: calc(1000vw / 640)
calc(...
Возможные проблемы
- если виртуальный “px” меньше физического
- не забываем про javascript
- интеграция с внешними виджета...
.-viewport-desktop: font-size: 10px
.-viewport-tablet-landscape: font-size: calc(1000vw / 980)
.-viewport-tablet-portrait:...
Спасибо!
вопросы ?
36
Вопиловский Константин
https://github.com/vflash
Próxima SlideShare
Cargando en…5
×

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

231 visualizaciones

Publicado el

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

Publicado en: Internet
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

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

  1. 1. Вопиловский Константин KamaGames Studio Предсказуемый Viewport
  2. 2. ? 2 Зачем
  3. 3. Вот зоопарк 3
  4. 4. Плотность пикселей 4
  5. 5. Размер 5
  6. 6. Расстояние 6
  7. 7. Устройства ввода 7
  8. 8. Нам нужно больше макетов 8
  9. 9. 9 Нет, нам нужна оптимизация
  10. 10. 10 Практика
  11. 11. desktop compact mobile 11 var templateType = ...
  12. 12. 12
  13. 13. userAgent 13
  14. 14. mobile compact desktop 14 A B
  15. 15. var templateType = “mobile” Viewport ? 15
  16. 16. Viewport 16 ➔ <meta name="viewport" ...> ➔ @viewport {...} ➔ или не указывать
  17. 17. <meta name="viewport"> content="width=device-width" content="width=360px" 17
  18. 18. <meta content="width=device-width" …> 18 device-width (css width): 320, 346, 360, 390, 400, 504, …
  19. 19. Не всякая резина одинаково полезна 19
  20. 20. То маленький, то большой 20
  21. 21. <meta name="viewport" content="width=360px"> 21
  22. 22. <meta name="viewport" content="width=360px"> 22 Неадекватное поведение браузеров
  23. 23. 23 <meta name="viewport" content="width=360px"> ● меняем width в зависимости от ориентации ● элементы c {overflow: scroll} ● часто по клику появляется лупа ● итд
  24. 24. ? 24
  25. 25. rem 25
  26. 26. “pxrem” 26
  27. 27. #!/bin/bash px2rem2px index.css > index.css 27
  28. 28. rem 28
  29. 29. font-size: calc(100vw / 360) 1px == 1rem 29
  30. 30. font-size: calc(100vw / 360) 1px == 1rem 100 100100 30 100 400
  31. 31. font-size: calc(1000vw / 360) 10px == 1rem 31
  32. 32. .-viewport-mobile-landscape: font-size: calc(1000vw / 520) .-viewport-mobile-portrait: font-size: calc(1000vw / 360) 32
  33. 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. 34. Возможные проблемы - если виртуальный “px” меньше физического - не забываем про javascript - интеграция с внешними виджетами - это хак ... 34
  35. 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. Спасибо! вопросы ? 36 Вопиловский Константин https://github.com/vflash

×