Skip to content

Commit da3aa48

Browse files
s-dudkoTatianaFokina
s-dudko
and
TatianaFokina
authored
Добавляет статью о плотности пикселей (#4789)
* Добавляет статью о плотности пикселей * Правит ссылки * Правит форматирование в демках * Редачит текст ヽ(✿ﾟ▽ﾟ)ノ * Исправляет ошибки * Исправляет `title` у демки * Исправляет второй `title` * Исправляет название демки * Немного причёсывает первую демку * Правит последние мелочи в тексте * Добавил пункт о консольных утилитах и упоминание об ИИ инструментах * Мелкие правки текста * Заменяет картинку * Слегка редачит дополнения * Добавляет контрибьютера --------- Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>
1 parent a657283 commit da3aa48

File tree

12 files changed

+403
-0
lines changed

12 files changed

+403
-0
lines changed

‎tools/pixel-density/demos/different-images/index.html

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<title>Пример двух изображений с разной плотностью пикселей — Плотность пикселей — Дока</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
10+
<style>
11+
*, *::before, *::after {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
html {
18+
color-scheme: dark;
19+
font-size: 18px;
20+
}
21+
22+
body {
23+
min-height: 100vh;
24+
padding: 50px;
25+
display: flex;
26+
align-items: flex-start;
27+
justify-content: center;
28+
background-color: #18191c;
29+
color: #FFFFFF;
30+
font-family: "Roboto", sans-serif;
31+
}
32+
33+
@media (max-width: 768px) {
34+
body {
35+
padding: 30px;
36+
}
37+
}
38+
39+
.demo {
40+
width: 65%;
41+
}
42+
43+
.demo__section {
44+
display: flex;
45+
flex-direction: column;
46+
}
47+
48+
.demo__title {
49+
margin-bottom: 17px;
50+
font-weight: 500;
51+
font-size: 1.625rem;
52+
}
53+
54+
.demo__subtitle {
55+
margin: 7px 0;
56+
font-size: 1rem;
57+
line-height: 1.4;
58+
}
59+
60+
.demo__images-wr {
61+
display: flex;
62+
justify-content: space-between;
63+
align-items: center;
64+
margin-top: 32px;
65+
}
66+
67+
.demo__picture {
68+
width: 128px;
69+
height: 128px;
70+
aspect-ratio: 1 / 1;
71+
}
72+
73+
.demo__image {
74+
width: 100%;
75+
height: 100%;
76+
object-fit: cover;
77+
}
78+
79+
@media screen and (min-width: 769px) {
80+
.demo__picture {
81+
width: 256px;
82+
height: 256px;
83+
}
84+
}
85+
86+
@media screen and (min-width: 1200px) {
87+
.demo__picture {
88+
width: 512px;
89+
height: 512px;
90+
}
91+
}
92+
</style>
93+
</head>
94+
<body>
95+
<main class="demo">
96+
<section class="demo__section">
97+
<h1 class="demo__title">Изображения одинакового размера с разной плотностью пикселей</h1>
98+
<p class="demo__subtitle">У изображения слева одинарная плотность пикселей, справа — двойная.</p>
99+
<div class="demo__images-wr">
100+
<picture class="demo__picture">
101+
<source srcset="../../images/cat-512.jpg" media="(min-width: 1200px)">
102+
<source srcset="../../images/cat-256.jpg" media="(min-width: 769px)">
103+
<img
104+
class="demo__image"
105+
src="../../images/cat-128.jpg"
106+
alt="Нарисованный рыжий котёнок в очках сидит перед ноутбуком и что-то изучает с умным видом"
107+
>
108+
</picture>
109+
110+
<picture class="demo__picture">
111+
<source srcset="../../images/cat-1024.jpg" media="(min-width: 1200px)">
112+
<source srcset="../../images/cat-512.jpg" media="(min-width: 769px)">
113+
<img
114+
class="demo__image"
115+
src="../../images/cat-256.jpg"
116+
alt=""
117+
>
118+
</picture>
119+
</div>
120+
</section>
121+
</main>
122+
</body>
123+
</html>

‎tools/pixel-density/demos/media-query/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<title>Вывод фонового изображения при помощи медиавыражений — Плотность пикселей — Дока</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
10+
<style>
11+
*, *::before, *::after {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
html {
18+
color-scheme: dark;
19+
}
20+
21+
body {
22+
min-height: 100vh;
23+
padding: 50px;
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
background-color: #18191c;
28+
color: #FFFFFF;
29+
font-family: "Roboto", sans-serif;
30+
font-size: 18px;
31+
}
32+
33+
.demo__section {
34+
width: 512px;
35+
height: 512px;
36+
}
37+
38+
.demo__image {
39+
width: 100%;
40+
height: 100%;
41+
42+
background-image: url(./../../images/cat@1x.jpg);
43+
background-size: 512px 512px;
44+
}
45+
46+
@media screen and (min-resolution: 2dppx) {
47+
.demo__image {
48+
background-image: url(./../../images/cat@2x.jpg);
49+
}
50+
}
51+
52+
@media all and (max-width: 768px) {
53+
.demo__section {
54+
width: 256px;
55+
height: 256px;
56+
}
57+
58+
.demo__image {
59+
background-size: 256px 256px;
60+
}
61+
}
62+
</style>
63+
</head>
64+
<body>
65+
<main class="demo">
66+
<section class="demo__section">
67+
<div class="demo__image">
68+
</div>
69+
</section>
70+
</main>
71+
</body>
72+
</html>

‎tools/pixel-density/images/cat-1024.jpg

356 KB
Loading

‎tools/pixel-density/images/cat-128.jpg

22.1 KB
Loading

‎tools/pixel-density/images/cat-256.jpg

58.4 KB
Loading

‎tools/pixel-density/images/cat-512.jpg

133 KB
Loading

‎tools/pixel-density/images/cat@1x.jpg

138 KB
Loading

‎tools/pixel-density/images/cat@2x.jpg

372 KB
Loading

‎tools/pixel-density/images/dev-tools.jpg

60.4 KB
Loading

‎tools/pixel-density/images/figma.jpg

154 KB
Loading

‎tools/pixel-density/images/pixel-density.png

26.3 KB
Loading

0 commit comments

Comments
 (0)