Some people build two versions of their website: mobile and, I guess, stationary? Anyway. They sniff around your browser and serve a proper version (most of the time). Oh, well. Others make it flexible and serve everything that site is capable of in a single file. And triple-sized pictures as well, just in case. All right then. Some are confident that there’s no such thing as mouse and keyboard on mobile, but of course there’s unlimited 5G. Interesting. And finally there’s a user looking at all of this with sadness. How to make it better using modern specs? Let’s see.

1. Условно
Условно
адаптивно
адаптивно
©
Артём
Поликарпов

4. Стили

5. Стили
header.css
navigation.css
search.css
content.css
gallery.css
sidebar.css
photo.css
form.css
button.css
slider.css
modal.css
footer.css
styles.css
—
—
—
—
—
—
—
—
—
—
—
—
—
5

6. @import
@import
@import
import
import
import
Стили
'header.css';
'navigation.css';
'search.css';
css from 'content.css';
css from 'gallery.css';
css from 'sidebar.css';
01.
02.
03.
01.
02.
03.
6

7. styles.css

8. Адаптивность

9. .header
tomato
min-width: 768px
plum
min-width: 1024px
wheat
Адаптивность от мобильных
{
color: ;
}
@media ( )
.header {
color: ;
}
}
@media ( )
.header {
color: ;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
05.
9

10. .header
wheat
max-width: 768px
plum
max-width: 1024px
tomato
Адаптивность от десктопа
{
color: ;
}
@media ( )
.header {
color: ;
}
}
@media ( )
.header {
color: ;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
01.
02.
03.
04.
05.
10

11. Подключение

12. styles.css
https://fonts.googleapis.com/
print.css
base.css
catalog.css
gallery.css
Подключение
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" " media="print">
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" ">
01.
02.
03.
01.
02.
03.
12

13. Перфоманс

14. Перфоманс
Браузер запросил страницу
Сначала грузится HTML
Бразуер находит стили
Потом грузится CSS
Нашлись другие стили?
Снова грузится CSS
Всё, можно рисовать
1.
2.
3.
4.
5.
6.
7.
14

15. Совсем
ничего

16. styles.css
https://fonts.googleapis.com/
Перфоманс
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" ">
/* styles.css */
@import 'header.css';
@import 'content.css';
@import 'footer.css';
01.
02.
01.
02.
03.
04.
16

17. ©
Артём
Поликарпов

18. По-другому

20. .footer__list
По-другому
{
margin: 0;
padding: 0;
list-style: none;
}
PostCSS Media Minmax
01.
02.
03.
04.
05.
20

21. @media (width < 736px)
По-другому
{
.footer__list {
display: grid;
row-gap: 16px;
grid-column: 3 / span 2;
grid-row: 1 / span 2;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
21

22. @media (width >= 736px)
По-другому
{
.footer__list {
display: flex;
flex-wrap: wrap;
grid-row: 1 / auto;
margin-bottom: -8px;
}
}
01.
02.
03.
04.
05.
06.
07.
08.
22

23. (width < 736px)
23

24. (max-width: 735px)
24

25. (width >= 736px)
25

26. (min-width: 736px)
26

27. (736px <= width < 1008px)
27

28. (min-width: 736px) and
(max-width: 1007px)
28

29. А что если…

30. base.css
mobile.css
tablet.css
desktop.css
А что если…
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" ">
…и внутри файлов сгруппировать подходящие @media ?
Всё будет точно так же 😭
01.
02.
03.
04.
30

31. base.css
mobile.css
tablet.css
desktop.css
А что если…
<link rel="stylesheet" href=" ">
<link rel="stylesheet" href=" "
media="(width < 768px)">
<link rel="stylesheet" href=" "
media="(768px <= width < 1024px)">
<link rel="stylesheet" href=" "
media="(width >= 1024px)">
01.
02.
03.
04.
05.
06.
07.
31

32. (width < 768px)
(768px <= width < 1024px)
(width >= 1024px)
А что если…
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="mobile.css"
media=" ">
<link rel="stylesheet" href="tablet.css"
media=" ">
<link rel="stylesheet" href="desktop.css"
media=" ">
01.
02.
03.
04.
05.
06.
07.
32

33. (max-width: 767px)
(min-width: 768px) and (max-width: 1023px)
(min-width: 1024px)
А что если…
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="mobile.css"
media=" ">
<link rel="stylesheet" href="tablet.css"
media=" ">
<link rel="stylesheet" href="desktop.css"
media=" ">
01.
02.
03.
04.
05.
06.
07.
33

34. ©
Adam
Argyle

35. ©
Adam
Argyle

36. Не работает (

38. Нет,работает!

40. Base.css,70 б
body {
background-position: 50% 0;
font-family: sans-serif;
}
01.
02.
03.
04.
40

41. tomato
data:image/png;base64,…
Mobile.css,5 Кб
body {
background-color: ;
background-image: url(' ');
background-size: 445px 280px;
}
01.
02.
03.
04.
05.
41

42. plum
data:image/png;base64,…
Tablet.css,62 Кб
body {
background-color: ;
background-image: url(' ');
background-size: 379px 280px;
}
01.
02.
03.
04.
05.
42

43. plum
data:image/png;base64,…
Desktop.css,241 Кб
body {
background-color: ;
background-image: url(' ');
background-size: 512px 280px;
}
01.
02.
03.
04.
05.
43

44. Mobile

46. (width < 768px)
(768px <= width < 1024px)
(width >= 1024px)
Как там?..
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="mobile.css"
media=" ">
<link rel="stylesheet" href="tablet.css"
media=" ">
<link rel="stylesheet" href="desktop.css"
media=" ">
01.
02.
03.
04.
05.
06.
07.
46

49. Tablet

51. Desktop

54. Предпочтения

55. retina.css
heavy.css
prefers-reduced-data: no-preference
animation.css
prefers-reduced-motion: no-preference
dark.css
prefers-color-scheme: dark
Предпочтения
<link rel="stylesheet" href=" "
media="(resolution >= 2dppx)">
<link rel="stylesheet" href=" "
media="( )">
<link rel="stylesheet" href=" "
media="( )">
<link rel="stylesheet" href=" "
media="( )">
01.
02.
03.
04.
05.
06.
07.
08.
55

56. Инструменты

57. Инструменты
PostCSS Media Minmax
PostCSS Extract Media Query
PostCSS Combine Media Query
Webpack Media Query Plugin
TODO
TODO
TODO
TODO
—
—
—
—
—
—
—
—
57

58. Спасибо!

59. Ссылки
Range Context
Media Queries Level 5
Build user-adaptive interfaces with preference MQ
—
—
—
59

60. @pepelsbey

61. sokr.me/cad