Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Вопиловский Константин
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
You’ve finished this document.
Upcoming SlideShare
"Web Audio Api", Анатолий Найда, MoscowJS 27
Next
Upcoming SlideShare
"Web Audio Api", Анатолий Найда, MoscowJS 27
Next

Share

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

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Предсказуемый 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

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

Views

Total views

243

On Slideshare

0

From embeds

0

Number of embeds

15

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×