медийни заявки

Така че, в тази статия ще се спра на една много интересна тема за създаване на адаптивни HTML страници с помощта на медийни заявки.

Какво е обикновено заявките за CSS медии? Същите тези въпроси са рамкирани в определен синтаксис кодове, които се прилагат само ако екрана на потребителя отговаря на условието на искането.

Ето примерна заявка:

@media екран и (макс ширина: 600px) тяло фон: #ccc;
>
/ * Вашият CSS код * /
>

В рамките на такова искане може да бъде произволен брой елементи, които са предмет на редица свойства, и те ще се активира само когато състоянието на медиите заявка. Тази система напомня принцип си стандарт оператор, ако ()<>, която е на разположение в повечето езици за програмиране. Както и в случая на ако, медийни заявки могат да имат няколко условия, за да изпълняват вложени CSS. Например:

@media екран и (мин ширина 600px.) и (макс ширина: 1000px) тяло фон: #ccc;
>
/ * Вашият CSS код * /
>

Веднага очевидно, че ще се извърши, ако ширината на изгледа 600 до 1000 пиксела.

Както вече ponilis заместник запитване по следния начин:

@media екран и (състояние) / * код * /
>

Вероятно сте забелязали екрана дума. Това означава нещо като типа на устройството, където продукцията отива. И все пак, с изключение на екран там: всичко, проекция, телевизия, печат, 3D-очила. За монитори, геймърите този екран. така с него ние всички примери. По принцип е добре да се въведат всички (за всички), ако не сте сигурни какво да фен потребителят отвори приложението или играта си, или това, което имате.

Напишете въпроси, можете да и двете CSS файловете, както и в рамките на HTML страници. Освен това можете да в HTML, можете да създадете състояние медиен заявка, при които файлът ще бъде свързан:

Това е файл, който е свързан, ако плътността на пикселите ще бъде 2. Той се използва предимно за идентифициране на четвърто iPhone.

По този начин, можете да напишете отделен CSS файлове за ориентация портрет или пейзаж:

Той се използва от много уеб разработчици.

С тази подредени. Да видим какво заявки могат да бъдат използвани като цяло и работят в модерни браузъри.

медийни заявки

Сега ще видим какво CSS медийни запитвания се опитаме по-често и може да дойде по-удобно.

списък на имоти, за да бъде написана с измислени настройки, които можете да разберат какви стойности могат да включват определена функция:

мин ширина: 100px - Минимална широчина на прозореца
макс ширина: 35em - Максимална ширина на прозореца
макс устройство ширина: 480px - Максималната ширина на устройството (в пиксели)
устройство ширина: 768px - Ширина на устройство
устройство аспектно съотношение: 9/16 - Съотношение
ориентация: пейзаж - хоризонтална ориентация
ориентация: портрет - портретна ориентация
разделителна способност: 96dpi - плътността на екрана
мин-резолюция: 192dpi - Минимална плътност екран
-WebKit-устройство пиксела съотношение. 75 - коефициент на плътност екран (в примера, стойността 0.75)
-WebKit-мин-устройство пиксела съотношение: 1.3 Минимална плътност съотношение на екрана

За последния параметър искам да поговорим малко. Трябва да добавя, че резолюцията става нестабилна. Някои устройства не вземат правилно поискат. Но -webkit-устройство пиксела съотношение е действителното съотношение на плътността на конвенционален ниска плътност на пикселите на екрана е на екран на 0.75, а 2 е Retina.

Послепис Ако искате бързо да проверите какво CSS заявки работят с вашето устройство, както и че те действително дават, тогава посетете тази страница на вашето устройство.