Изработка на фирмен сайт

Razberi.info се посещава от около 1000 - 1200 човека дневно. Искате банер в сайта или рекламна статия? Свържете се с нас на webselo.com/services

CSS @media screen

@media е изключително полезно свойство в CSS, което позволява на дизайнерите да разработват разнообразни стилове за всякакви устройства. @media беше поддържано и в CSS2, като там се наричаше media types, а в CSS3 е известно като media queries. Освен това в CSS3 поддръжката му е много по-добра.

Това, което върши media queries, е да погледне широчината и височината на viewport на устройството, както и широчината и височината на екрана на самото устройство, също така ще провери дали устройството е в пейзажен или портретен режим (вертикално ли е, или е хоризонтално), резолюцията и много други неща (по-долу съм ги описал).

Поддържа се (@media) от следните браузъри:

  • Chrome 21 или по-нова версия.
  • IE9 или по-нова версия.
  • Mozilla Firefox 3.5 или по-нова версия.
  • Safari 4.0 или по-нова версия.
  • Opera 9 или по-нова версия.

Какъв е синтаксисът на Media Queries в CSS3?

Синтаксисът е съвсем прост, ето и пример:

@media screen and (min-width:480px){body{background-color:red;}}

С този синтаксис указах, че всички екрани на смартфони, таблети, лаптопи и настолни компютри, които имат широчина от поне 480px, ще имат червен фон.

Можем да укажем и дали @media да се приложи на всички устройства, или да не се приложи на определен тип устройства, или да се приложи само на избрани устройства по зададени от нас параметри. Ето как става това:

@media screen only (min-width:480px){body{background-color:red;}}

Горният код ще се приложи само на устройствата, които отговарят на условието да имат широчина от поне 480px. Можем да комбинираме както си щем and|not|only. CSS3 ни позволява да пишем тези стилизации във външен файл, като това е добрата практика, вместо да пишем в <head><style>@media...</style></head> на страницата.

Какви медийни устройства поддържа @media?

  • All - всички видове устройства, които могат да отварят html страници.
  • print - ползва се за принтери. Много често се пишат отделни стилизации, които да бъдат изпращани като инструкции на принтерите.
  • screen - екрани на смартфони, таблети, лаптопи, настолни компютри и други подобни.
  • speech - четци на екрани, които четат на глас.

Свойства на @media

  • aspect-ratio - съотношението между широчината и височината на viewport.
  • color - броят битове на цвят. Използва се при изходящи устройства, например принтери.
  • color-index - броят цветове, които устройството може да визуализира.
  • device-aspect-ratio -съотношението между широчината и височината на устройството.
  • device-height - височината на устройството, например екрана на настолен компютър.
  • device-width - широчината на устройството, например екрана на настолен компютър.
  • grid - задава дали устройството е grid или bitmap.
  • height - височина на viewport.
  • max-aspect-ratio - максимално съотношение между широчината и височината на показваната област.
  • max-color - максимален брой битове на цвят за някакво изходящо устройство, например принтер.
  • max-color-index - максимален брой цветове, които устройството може да визуализира.
  • max-device-aspect-ratio - максимално съотношение между широчината и височината на устройството.
  • max-device-height - максимална височина на устройството, например компютърен екран.
  • max-device-width - максимална широчина на устройството, например компютърен екран.
  • max-height - максимална височина на визуализираната площ, например прозорец на браузър.
  • max-monochrome - максимален брой битове за "цвят" на монохромно (в сива гама) устройство.
  • max-resolution - максималната резолюция на устройството, измерено в dpi или пък в dpcm.
  • max-width - максимална широчина на площта за визуализация, например прозорец на браузър.
  • min-aspect-ratio - минималното съотношение между широчината и височината за визуализация.
  • min-color - минималният брой битове за цвят за някакво изходящо устройство, например принтер.
  • min-color-index - минималният брой цветове, които устройството може да визуализира.
  • min-device-aspect-ratio - минималното съотношение между широчината и височината на устройството.
  • min-device-width - минималната широчина на устройството, например компютърен екран.
  • min-device-height - минималната височина на устройството, например компютърен екран.
  • min-height - минималната височина на площта за визуализация, например прозорец на браузър.
  • min-monochrome - минималният брой битове за "цвят" на монохромно (със сива гама) устройство.
  • min-resolution - минималната резолюция на устройсвото, измерена в dpi или пък в dpcm.
  • min-width - минималната широчина на площта за визуализация, например прозорец на браузър.
  • monochrome - броят битове за "цвят" на монохромно (със сива гама) устройство.
  • orientation - ориентацията на устройството - портретен или пейзажен режим.
  • overflow-block - по какъв начин изходящото устройство се грижи за съдържанието, което надхвърля размерите на viewport, заедно с оста на самия block елемент.
  • overflow-inline - да може ли устройство, което надхвърля размерите на viewport да се скролва в браузъра.
  • resolution - резолюция на някакво изходящо устройство, измерена в dpi или пък в dpcm.
  • scan - сканиране от страна на някакво изходящо устройство.
  • update-frequency - с каква скорост устройството може да модифицира външния вид на съдържанието (добавено в Media Queries, ниво 4)
  • width - широчината на viewport.
 
 

Във видеото написах този код:

<style>
@media screen and (min-width:400px){body{background-color:red;}p{background-color:blue; text-align:center; font-size:60px;}}
@media screen and (min-width:600px){body{background-color:blue;}p{background-color:red; text-align:right; font-size:30px;}}
@media screen and (min-width:800px){body{background-color:white;}p{background-color:pink; text-align:left; font-size:30px; border:4px solid #03F; padding:40px;}}

/* Code by Webselo.com, Kiril Yovev */
</style>

До нови кодвания :)

Изработка на уебсайтове, реклама и поддръжка в социалните мрежи, копирайтинг услуги