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

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

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





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



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





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

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

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

Какво представляват медийните заявки?

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



Прочетете повече: Кодът за основни свойства на CSS3 свойства

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



Използване на медийни заявки

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

Структурата на медийните заявки

Пример за структура на медийна заявка


@media only/not media-type and (expression){
/*CSS code*/
}

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



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

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

Пример за медийна заявка с единствената ключова дума


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

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

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

Пример за медийна заявка по подразбиране


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Поставяне на медийни заявки

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

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

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

Обхватът на медийните заявки

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

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

Пример за заявка за таблетна медия


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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

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

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

Пример за медийна заявка за таблет с обхват


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

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

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

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




href='tablet.css'>


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

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

как да проверите дали твърдият диск се повреди

Сега имате инструментите за създаване на адаптивни дизайни

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

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

Дял Дял Туит електронна поща Как да зададете фоново изображение в CSS

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

Прочетете Напред Свързани теми
  • Програмиране
  • Уеб разработка
  • Уеб дизайн
  • CSS
За автора Кадейша Кийн(21 статии са публикувани)

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

Още от Kadeisha Kean

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате