-
Notifications
You must be signed in to change notification settings - Fork 1
/
13.html
471 lines (421 loc) · 24.7 KB
/
13.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Адаптивность</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#007BFF">
<link rel="stylesheet" href="node_modules/@shower/material/styles/styles.css">
<link rel="stylesheet" href="styles/all_styles.css">
<link rel="shortcut icon" type="image/png" href="pictures/general/narfu_icon.png">
</head>
<body class="shower list">
<header class="caption">
<h1>Адаптивность</h1>
<p><a href="index.html">Web-технологии</a></p>
</header>
<section class="slide narfu_official" id="cover">
<h2>Адаптивность</h2>
<p>Лекция №8</p>
</section>
<!-- Main -->
<section class="slide narfu">
<h2 class="shout">Адаптивный и отзывчивый дизайн</h2>
</section>
<section class="slide narfu">
<h2>Адаптивная верстка</h2>
<p><i>Адаптивная вёрстка</i> сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и
смартфонов. </p>
<img src="pictures/13/adaptive.png" alt="" style="width: 100%">
</section>
<section class="slide narfu">
<h2>Мобильный трафик</h2>
<p>Мобильный интернет-трафик растёт с каждым годом растёт, и, чтобы эффективно обрабатывать этот трафик, нужно
предлагать пользователям адаптивные сайты с удобным интерфейсом.</p>
<p>Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных
устройствах.</p>
</section>
<section class="slide narfu">
<h2>mobile-friendly</h2>
<p>Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной
выдаче адаптированные под мобильные устройства сайты специальной пометкой <i>mobile-friendly</i>.</p>
<p>В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для
пользователей в мобильном поиске.</p>
</section>
<section class="slide narfu">
<h2>mobile-friendly</h2>
<div class="columns two">
<img src="pictures/13/mobile-friendly.png" alt="" style="width: 90%">
<p>Проверить отображение страницы на мобильных устройствах можно на сервисах <a
href="https://beta.webmaster.yandex.ru/">Яндекс.Вебмастер</a> и <a
href="https://search.google.com/test/mobile-friendly?utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect">
Google Developers</a>.</p>
</div>
</section>
<section class="slide narfu">
<h2>Адаптивная верстка предполагает</h2>
<ul>
<li>отсутствие горизонтальной полосы прокрутки;</li>
<li>отсутствие масштабируемых областей при просмотре на любом устройстве;</li>
<li>читабельный текст;</li>
<li>большие области для кликабельных элементов.</li>
</ul>
</section>
<section class="slide narfu">
<h2>Адаптивный/отзывчивый</h2>
<p><b>Responsive Design</b> (RWD) — отзывчивый дизайн — проектирование сайта с определенными значениями свойств,
например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах;</p>
<p><b>Adaptive Design</b> (AWD) — адаптивный дизайн, или динамический показ — проектирование сайта с условиями,
которые изменяются в зависимости от устройства, базируясь на нескольких макетах фиксированной ширины.</p>
</section>
<section class="slide narfu">
<h2>Адаптивный/отзывчивый</h2>
<ul>
<li><code>static</code> - размер макета всегда фиксирован;</li>
<li><code>liquid</code> - размеры элементов указаны в процентах (плохо смотрится на мобильных устройствах);</li>
<li><code>adaptive</code> - макет перестраивается в некоторых ключевых значениях ширины страницы;</li>
<li><code>responsitive</code> - объединяет в себе liquid и adaptive.</li>
</ul>
<p class="copyright"><a href="http://g-mops.net/epica_saitama/epica_layout/index_adaptive.html">Сайт с наглядным
примером отличий между макетами</a></p>
</section>
<section class="slide narfu">
<h2 class="shout">Приемы отзывчивого дизайна</h2>
</section>
<section class="slide narfu">
<h2>Гибкость</h2>
<p>Cкладывается из трех важных частей</p>
<ol>
<li>гибкость макета</li>
<li>гибкость текстового содержимого</li>
<li>гибкие изображений</li>
</ol>
</section>
<section class="slide narfu">
<h2>Гибкость макета</h2>
<p><b>Гибкость макета</b> базируется на использовании относительных единиц измерения вместо фиксированных пиксельных
значений, что позволяет регулировать ширину в соответствии с доступным пространством.</p>
</section>
<section class="slide narfu">
<h2>Гибкость макета</h2>
<img src="pictures/13/giphy.gif" alt="" class="place" style="margin-top: 20px;">
</section>
<section class="slide narfu">
<h2>Гибкость текстового содержимого</h2>
<p><b>Гибкость текстового содержимого</b> достигается путем вычисления размеров шрифта относительно размера шрифта в
браузерах (по умолчанию <code>16px</code>). </p>
<p>Например для фиксированного размера <code>font-size: 42px</code> относительный размер равен <code>42px / 16px =
2.625em</code>.</p>
</section>
<section class="slide narfu">
<h2>Гибкие изображения</h2>
<p>Проблема <b>гибких изображений</b> решается с помощью правила</p>
<pre style="font-size: smaller">
<code>img {</code>
<code> width: 100%; </code>
<code> max-width: 100%;</code>
<code>}</code>
</pre>
<p>Это правило гарантирует, что все изображения на странице никогда не будут шире, чем их контейнеры и никогда не
превысят своих истинных размеров на больших экранах.</p>
</section>
<section class="slide narfu">
<h2>Универсальные шаблоны</h2>
<p>При проектировании интерфейса важно использовать такие шаблоны, которые отоносительно просто будет настраивать
для разных размеров экрана. </p>
<p>Например, можно использовать так называемые карточные интерфейсы — прямоугольные фигуры с закруглёнными углами,
которые представляют собой контейнеры для контента.</p>
</section>
<section class="slide narfu">
<img src="pictures/13/cards.png" alt="" class="cover h">
</section>
<section class="slide narfu">
<h2>Универсальные шаблоны</h2>
<p>Большая часть макетов, используемых для создания отзывчивого веб-дизайна, относятся к одной из пяти категорий
шаблонов, определенных Люком Вроблевски:</p>
<ul>
<li>Mostly Fluid (Наиболее резиновый)</li>
<li>Column Drop (Столбцы друг под другом)</li>
<li>Layout Shifter (Двигающийся макет)</li>
<li>Tiny Tweaks (Крошечные изменения)</li>
<li>Off Canvas (Вне экрана)</li>
</ul>
<p class="copyright"><a href="https://html5book.ru/otzyvchivyj-dizayn-saita/">Статья с более подробным разбором</a>
</p>
</section>
<section class="slide narfu">
<h2>Расстановка приоритетов</h2>
<p>Оставьте только самое необходимое — хороший приём, особенно для отзывчивого дизайна. Создавайте отзывчивые и
дружелюбные минималистические интерфейсы, которые приобретают всё большую популярность в настоящее время.</p>
<p>Расставьте приоритеты и правильно скройте контент — используйте скрытые элементы управления, особенно для
устройств с небольшими экранами.</p>
</section>
<section class="slide white">
<img src="pictures/13/aviasales.png" alt="" class="cover h">
</section>
<section class="slide narfu">
<h2 class="shout">Медиа-запросы</h2>
</section>
<section class="slide narfu">
<h2>Перед началом</h2>
<p>При создании адаптивных веб-страниц также необходимо обратить внимание на метатег <code>viewport</code>.</p>
<pre style="font-size: smaller">
<code><head></code>
<code> ...</code>
<code> <meta name="viewport" content="width=device-width, initial-scale=1"></code>
<code> ...</code>
<code></head></code>
</pre>
</section>
<section class="slide narfu">
<h2>Что такое медиа-запрос?</h2>
<pre style="font-size: smaller">
<code>@media условие {</code>
<code> .element{</code>
<code> /* стили для элемента*/</code>
<code> }</code>
<code>}</code>
</pre>
<p>Создание медиа-запроса начинается с ключевого слова <code>@media</code> после которого указывается одно или
несколько условий. </p>
</section>
<section class="slide narfu">
<h2>Что такое медиа-запрос?</h2>
<pre style="font-size: smaller">
<code>@media условие {</code>
<code> .element{</code>
<code> /* стили для элемента*/</code>
<code> }</code>
<code>}</code>
</pre>
<p>В качестве условия можно указывать тип устройства или требования к определённой характеристике. Требование к
определённой характеристике записывается в круглых скобках.</p>
</section>
<section class="slide narfu">
<h2>Тип носителя</h2>
<ul>
<li><code>all</code> – для всех;</li>
<li><code>print</code> – для принтеров и в режиме предварительного просмотра страницы перед печатью;</li>
<li><code>screen</code> – для устройств с экранами;</li>
<li><code>speech</code> – для программ чтения с экрана.</li>
</ul>
</section>
<section class="slide narfu">
<h2>Тип носителя</h2>
<pre>
<code class="comment">/* Например, этот @media только для экранов */</code>
<code>@media screen { ... }</code>
<code> </code>
<code class="comment">/* А здесь для экранов и принтеров */</code>
<code>@media screen, print { ... }</code>
</pre>
</section>
<section class="slide narfu">
<h2>Логические операторы</h2>
<p>Оператор and используется для объединения нескольких условий. В этом случае их результат будет истинным, когда
каждое из них будет истинным.</p>
<pre>
<code>@media screen and (min-width: 1200px) and</code>
<code> (orientation: landscape) {</code>
<code class="comment"> /* что-то */</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>Логические операторы</h2>
<p>Применение стилей, когда необходимо лишь выполнение одного из указанных условий, достигается посредством
разделения их между собой с помощью <code>,</code> (запятой).</p>
<pre>
<code>@media (min-width: 544px), (orientation: landscape) {</code>
<code class="comment"> ...</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>Логические операторы</h2>
<p>Ключевое слово not используется для отрицания. При использовании not с and отрицание работает для всего
медиа-запроса.</p>
<pre>
<code>@media not screen and (min-width: 411px)</code>
<code> and (min-height: 731px) {</code>
<code class="comment"> /* что-то */</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>Логические операторы</h2>
<p>При использовании not в выражении с запятой он добавляет отрицание только для этой части.</p>
<pre>
<code>@media not screen, not (min-width: 411px) {</code>
<code class="comment"> ...</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>Логические операторы</h2>
<p>Ключевое слово <code>only</code> предназначено для того, чтобы браузеры, которые не поддерживают CSS3
медиа-запросы их игнорировали.</p>
<p>В настоящее время это уже не актуально, поэтому использовать <code>only</code> не нужно (если конечно вы не
поддержиаете совсем старые браузеры).</p>
</section>
<section class="slide narfu">
<h2>Характеристики носителя</h2>
<p>При составлении <b>условия</b> кроме типов устройств и логических операторов можно ещё задавать <b>требования к
определённым характеристикам</b>, которые должен иметь браузер, устройство вывода, или окружение. В некоторых
источниках характеристики называют медиа-функциями.</p>
<p>Каждая характеристика в <code>@media</code> должна быть заключена в круглые скобки.</p>
</section>
<section class="slide narfu">
<h2>width</h2>
<p>Медиа-характеристика <code>width</code> позволяет задать условие на равенство ширины области просмотра
определённому значению. </p>
<pre>
<code>@media (width: 320px) { </code>
<code> ...</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>width</h2>
<p>Для определения диапазона можно использовать <code>min-width</code> и <code>max-width</code>. Например, <code>@media</code>
для ширины <code>viewport</code> от <code>576px</code> до <code>1200px</code>:</p>
<pre>
<code>@media (min-width: 576px) and (max-width: 1199.98px) {</code>
<code> ...</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>height</h2>
<p>Для задания условий в отношении высоты viewport можно использовать <code>height</code>, <code>min-height</code> и <code>max-height</code>.
</p>
<pre>
<code>@media (min-height: 720px) { </code>
<code> ...</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>orientation</h2>
<p>С помощью <code>orientation</code> можно установить те или иные стили в зависимости от того, в каком режиме
(альбомном или портретном) отображается сайт.</p>
<pre>
<code>@media (orientation: <mark>landscape</mark>) {</code>
<code> .cover { background: url(bg-l.png) no-repeat; }</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>orientation</h2>
<p>С помощью <code>orientation</code> можно установить те или иные стили в зависимости от того, в каком режиме
(альбомном или портретном) отображается сайт.</p>
<pre>
<code>@media (orientation: <mark>portrait</mark>) {</code>
<code> .cover { background: url(bg-p.png) no-repeat; }</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>aspect-ratio</h2>
<p>Характеристики <code>aspect-ration</code>, <code>min-aspect-ratio</code> и <code>max-aspect-ratio</code> позволяют
задавать стили в зависимости от соотношения сторон <code>viewport</code>.</p>
<pre style="font-size: smaller">
<code>@media (min-aspect-ratio: 9/16) {</code>
<code> .header {</code>
<code> background-color: #0dcaf0;</code>
<code> }</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>aspect-ratio</h2>
<p>Характеристики <code>aspect-ration</code>, <code>min-aspect-ratio</code> и <code>max-aspect-ratio</code> позволяют
задавать стили в зависимости от соотношения сторон <code>viewport</code>.</p>
<pre style="font-size: smaller">
<code>@media (max-aspect-ratio: 16/9) {</code>
<code> .header {</code>
<code> background: #ffc107;</code>
<code> }</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>aspect-ratio</h2>
<p>Характеристики <code>aspect-ration</code>, <code>min-aspect-ratio</code> и <code>max-aspect-ratio</code> позволяют
задавать стили в зависимости от соотношения сторон <code>viewport</code>.</p>
<pre style="font-size: smaller">
<code>@media (aspect-ratio: 1/1) {</code>
<code> .header {</code>
<code> background: #6c757d;</code>
<code> }</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>resolution</h2>
<p>Характеристики <code>resolution</code>, <code>min-resolution</code> и <code>max-resolution</code> можно
использовать, когда нужно задать стили в зависимости от плотности пикселей устройства.</p>
</section>
<section class="slide narfu">
<pre style="font-size: smaller">
<code class="comment">/* Default */</code>
<code>p {</code>
<code> font-size: 16px;</code>
<code>}</code>
<code> </code>
<code class="comment">/* Minimum resolution */</code>
<code>@media (min-resolution: 150dpi) {</code>
<code> p {</code>
<code> font-size: 14px;</code>
<code> }</code>
<code>}</code>
</pre>
</section>
<section class="slide narfu">
<h2>Разрешение экрана</h2>
<p>При составлении медиазапросов нужно ориентироваться на так называемые переломные (от английского
<i>breakpoints</i>) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта
существенно меняется, например, появляется горизонтальная полоса прокрутки.</p>
</section>
<section class="slide narfu">
<img src="pictures/13/breakpoints.png" alt="" class="cover h">
</section>
<section class="slide narfu">
<h2>Стратегии использования медиа-запросов</h2>
<ul>
<li>Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.</li>
<li>Использование свойства <code>max-width</code> вместо <code>max-width</code> при задании ширины
блока-контейнера
</li>
<li>Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом,
левого отступа для списков и т.п.)
</li>
</ul>
</section>
<section class="slide narfu">
<h2>Стратегии использования медиа-запросов</h2>
<ul>
<li>Уменьшение размеров шрифтов для мобильных устройств;</li>
<li>Превращение линейных навигационных меню в раскрывающиеся;</li>
<li>Скрытие второстепенного содержимого на мобильных устройствах с помощью <code>display: none</code>;</li>
<li>Подключение фоновых изображений уменьшенных размеров.</li>
</ul>
</section>
<!-- Footer -->
<section class="slide" id="see-more">
<h2 class="shout">
<a href="index.html">Все презентации<br>на GitHub Pages</a>
</h2>
</section>
<footer class="badge">
<a href="https://github.com/LoveSolaristics/shower-presentation.git">
<svg width="81" height="79" viewBox="0 0 81 79" aria-hidden="true">
<path d="M40.5 0a40.5 40.5 0 0 0-12.8 78.93c2 .37 2.76-.88 2.76-2s0-3.51-.05-6.89c-11.27 2.45-13.64-5.43-13.64-5.43-1.84-4.68-4.5-5.92-4.5-5.92-3.68-2.51.28-2.46.28-2.46 4.06.29 6.2 4.17 6.2 4.17 3.61 6.19 9.48 4.4 11.79 3.37a8.65 8.65 0 0 1 2.57-5.41c-9-1-18.45-4.5-18.45-20a15.65 15.65 0 0 1 4.17-10.87 14.57 14.57 0 0 1 .4-10.72s3.4-1.09 11.14 4.15a38.39 38.39 0 0 1 20.28 0c7.73-5.24 11.13-4.15 11.13-4.15a14.55 14.55 0 0 1 .4 10.72 15.63 15.63 0 0 1 4.16 10.87c0 15.56-9.47 19-18.49 20 1.45 1.25 2.75 3.72 2.75 7.5v11.11c0 1.08.73 2.34 2.78 1.95A40.51 40.51 0 0 0 40.5 0z"></path>
</svg>
Репозиторий<br>на GitHub
</a>
</footer>
<div class="progress"></div>
<script src="node_modules/@shower/core/dist/shower.js"></script>
</body>
</html>