|
@@ -81,27 +81,27 @@
|
|
|
|
|
|
|
|
|
Чтобы мобильные браузеры не изменяли автоматически размер страниц сайта,
|
|
|
-используется специальный тег \<meta\> с атрибутом name="viewport". В данном теге
|
|
|
-допускается устанавливать определенное значение для параметров width и
|
|
|
-initial-scale:
|
|
|
+используется специальный тег `<meta\` с атрибутом name="viewport". В данном теге
|
|
|
+допускается устанавливать определенное значение для параметров `width` и
|
|
|
+`initial-scale`:
|
|
|
|
|
|
|
|
|
|
|
|
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+```html
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+```
|
|
|
|
|
|
-
|
|
|
+- `width` указывает размер **CSS-пикселя**. При значении `device-width`, ширина страницы равна ширине
|
|
|
+ экрана устройства *с поправкой на плотность пикселей на экране*, так как фактический пиксель
|
|
|
+ на смартфонах обычно меньше пикселя на экранах компьютеров и ноутбуков;
|
|
|
+ При числовом значении **CSS-пиксель** будет такого размера, что бы на экран помещалось
|
|
|
+ это количество пикселей. (меньше число - крупнее шрифты и т. п.)
|
|
|
|
|
|
-- initial-scale=1 говорит о том, что размер страницы в браузере будет равен
|
|
|
- 100% величины области просмотра. То есть, соотношение между физическим
|
|
|
- пикселем и css пикселем будет 1:1;
|
|
|
+- `initial-scale` - изначальное масштабирование. Так же есть параметры `minimal-scale` и
|
|
|
+ `maximum-scale` для задания ограничений масштаба страницы.
|
|
|
|
|
|
|
|
|
|
|
|
-- width=device-width говорит о том, что ширина страницы будет равна 100%
|
|
|
- ширины окна любого браузера. То есть, ширина страницы сайта соответствует
|
|
|
- ширине устройства, поэтому её не надо масштабировать.
|
|
|
|
|
|
|
|
|
|
|
@@ -147,19 +147,19 @@ initial-scale:
|
|
|
|
|
|
- непосредственно в коде страницы:
|
|
|
|
|
|
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+```html
|
|
|
<style>
|
|
|
@media (max-width: 767px) { #sidebar {display: none;} }
|
|
|
</style>
|
|
|
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+```
|
|
|
|
|
|
|
|
|
|
|
|
- внутри таблицы стилей main.css:
|
|
|
|
|
|
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+```html
|
|
|
@media (max-width: 767px) { #sidebar {display: none;} }
|
|
|
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
+```
|
|
|
|
|
|
|
|
|
|
|
@@ -184,6 +184,8 @@ initial-scale:
|
|
|
@media not all and (monochrome) {...}
|
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|
|
|
|
|
+сработает как `not (all and monochrome)` не (все виды вывода и чб)
|
|
|
+
|
|
|
|
|
|
|
|
|
7 Тип носителя:
|
|
@@ -239,5 +241,3 @@ initial-scale:
|
|
|
в запросе, max-height — высота области просмотра которого меньше значения,
|
|
|
указанного в запросе.
|
|
|
|
|
|
-
|
|
|
--
|