Browse Source

04 updates

Ivan Asmer 6 years ago
parent
commit
6101044a26
1 changed files with 18 additions and 18 deletions
  1. 18 18
      04_responsive.md

+ 18 - 18
04_responsive.md

@@ -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 — высота области просмотра которого меньше значения,
     указанного в запросе.
 
--