Как да използваме медийни заявки в HTML и CSS за създаване на отзивчиви уебсайтове

Ако искате да разработите уеб сайтове / уеб приложения, тогава знанието как да създавате отзивчиви дизайни е от съществено значение за вашия успех.

В миналото създаването на уебсайтове, които се адаптират добре към различни размери на екрана, беше лукс, който собствениците на уебсайтове трябваше да поискат от разработчик. Повишаването на използването на смартфони и таблети обаче направи отзивчивия дизайн необходимост в света на разработването на софтуер.

Използването на медийни заявки е най-добрият начин да се гарантира, че вашият уебсайт / уеб приложение изглежда точно така, както искате на всяко устройство.

Разбиране на отзивчивия дизайн

Накратко, отзивчивият дизайн се занимава с използването на HTML / CSS за създаване на оформление на уебсайт / уеб приложение, което се адаптира към различни размери на екрана. В HTML / CSS има няколко различни начина за постигане на отзивчивост при дизайна на уебсайт:

• Използване на rem и em единици вместо пиксели (px)
• Задаване на изглед / мащаб на всяка уеб страница
• Използване на медийни заявки

Заявката за мултимедия е характеристика на CSS, която беше пусната във версията CSS3. С въвеждането на тази нова функция потребителите на CSS получават възможността да регулират показването на уеб страница въз основа на височина, ширина и ориентация на устройство / екран (пейзажен или портрет).

Прочетете още: Основната таблица за измама на CSS3 Properties

Мултимедийните заявки предоставят рамка за създаване на код веднъж и използването му многократно в цялата ви програма. Това може да не изглежда толкова полезно, ако разработвате уебсайт само с три уеб страници, но ако работите за компания със стотици различни уеб страници - това ще се окаже огромно време спестител.

Има няколко различни неща, които трябва да вземете предвид, когато използвате медийни заявки: структура, разположение, обхват и свързване.

само @media / не тип медия и (израз) {
/ * CSS код * /
}

Общата структура на медийна заявка включва:

• Ключовата дума @media
• Ключовата дума not / only
• Тип носител (който може да бъде екран, печат или реч)
• Ключовата дума „и“
• Уникален израз, затворен в скоби
• CSS код, затворен в чифт отворени и затворени фигурни скоби.

Свързани: Използване на CSS за форматиране на документи за печат

Екран само за @media и (макс. ширина: 450px) {
тяло {
цвят на фона: син;
}
}

Примерът по-горе прилага CSS стил (по-специално син цвят на фона) само за екрани на устройства, които имат ширина 450px и по-малко - така че основно смартфони. Ключовата дума „only“ може да бъде заменена с ключовата дума „not“ и тогава CSS стилът в медийната заявка по-горе би се прилагал само за печат и реч.

По подразбиране обаче декларация за обща медийна заявка се прилага и за трите типа медия, така че не е необходимо да се посочва тип медия, освен ако целта е да се изключи един или повече от тях.

/ * дизайн за смартфони * /
@media (максимална ширина: 450px) {
тяло {
цвят на фона: син;
}
}

Медийна заявка е CSS свойство; следователно може да се използва само в рамките на езика за стилизиране. Има три различни начина да включите CSS във вашия код; обаче само два от тези методи осигуряват практически начин за включване на медийни заявки във вашите програми - вътрешен или външен CSS.

Вътрешният метод включва добавяне на

Външният метод включва създаване на медийна заявка във външен CSS файл и свързването му с вашия HTML файл чрез етикет.

Независимо дали медийните заявки се използват чрез вътрешен или външен CSS, има един основен аспект на езика за стилизиране, който може да повлияе неблагоприятно на функционирането на медийна заявка. CSS има правило за приоритет. Когато използвате a CSS селектор, или в този случай медийна заявка, всяка нова медийна заявка, която се добавя към CSS файла, отменя (или има предимство) предходната.

Кодът за медийни заявки по подразбиране, който имаме по-горе, е насочен към смартфони (450px широк и по-малък), така че ако искате да зададете различен фон за таблети, може би си мислите, че можете просто да добавите следния код към вашия съществуващ CSS файл.

/ * дизайн за таблети * /
@media (максимална ширина: 800px) {
тяло {
цвят на фона: червен;
}
}

Единственият проблем е, че поради реда на предимство таблетите ще имат червен цвят на фона, а смартфоните вече ще имат и червен цвят на фона, тъй като 450px и по-малко е под 800px.

Един от начините за решаване на този малък проблем би бил добавянето на медийна заявка за таблети преди тези за смартфони; последният ще замени първия и сега ще имате смартфони със син цвят на фона и таблети с червен цвят на фона.

Има обаче по-добър начин да постигнете отделен стил за смартфони и таблети, без да се притеснявате за реда на предимство. Това е характеристика на медийните заявки, известни като спецификация на диапазона, където разработчикът може да създаде медийна заявка с максимална и минимална ширина (диапазон).

/ * дизайн за таблети * /
@media (max-width: 800px) и (min-width: 451) {
тяло {
цвят на фона: червен;
}
}

С горния пример поставянето на медийни заявки в таблица със стилове става без значение, тъй като дизайнът за таблети и смартфони е насочен към две отделни колекции по ширина.

Ако не искате да вграждате медийни заявки във вашия CSS код, има алтернативен метод, който можете да използвате. Този метод включва използване на медийни заявки в етикет на HTML файл, така че вместо да имате една масивна таблица със стилове, която съдържа предпочитанията за стилизиране за смартфони, таблети и компютри - можете да използвате три отделни CSS файла и да създадете своите медийни заявки в на етикет.

The tag е HTML елемент, който се използва за импортиране на CSS стил от външен лист със стилове. Този маркер има мултимедийно свойство, което работи по същия начин, както медийната заявка в CSS.

 основна таблица със стилове 

 таблица със стилове на таблет 
href = "tablet.css">
 таблица със стилове на смартфон 

Кодът по-горе трябва да бъде поставен в

етикет на вашия HTML файл. Сега всичко, което трябва да направите, е да създадете три отделни CSS файла с имената на файлове main.css, tablet.css и smartphone.css - след това да създадете конкретния дизайн, който бихте искали за всяко устройство.

Стилът в основния файл ще се прилага за всички екрани с ширина по-голяма от 800px, ще се прилага стилът в файла на таблета на всички екрани с ширина между 450px и 801px, а стилът във файла на смартфона ще се прилага за всички екрани по-долу 451px.

Ако стигнете до края на тази статия, успяхте да научите какво е адаптивният дизайн и защо е полезен. Вече можете да идентифицирате и използвате медийни заявки в CSS и HTML файлове. Освен това се запознахте с реда на приоритет в CSS и видяхте как това може да повлияе на функционирането на вашите медийни заявки.

Кредит за изображение: отрицателно пространство /Пексели

Как да зададете фоново изображение в CSS

CSS е мощен инструмент за стилизиране на уеб страници. Научаването как да поставите фоново изображение ви научава на много основи на CSS.

Прочетете Напред

За автора