Видове @media query при CSS

Чрез правилото @media, един сайт може да има различно оформление за PC екран, печат, мобилен телефон, таблет и т.н.

Видове медия

Някои CSS свойства са предназначени само за определени медии. Така например „voice-family“ е предназначен за фонетичните user agents. Някои други свойства могат да се използват за различни видове медии. Например, свойството font-size може да се използва както за екран, така и за печатане, но може би с различни стойности. Документа обикновено се нуждае от по-голям font-size за екрана, отколкото на хартия. А не-серифните шрифтове са лесни за четене на екрана, докато серифните са по-лесно четими на хартия.

@media Правилото

@media – позволява да се използват различни стилове за различни медии в същия CSS файл. Стилът в примера по-долу казва на браузъра, да се покаже 14 пиксела Verdana шрифта на екрана. Но ако страницата се отпечатва, той ще бъде 20 пиксела, и в червен цвят:

Опитайте сами »

Други видове медиа

Тип Описание
all За всички медиа устройства
aural За синтезатори на говор и звук
braille За браилови устройства
embossed За браилови принтери
handheld За малки или мобилни устройства
print За принтери
projection За презентации, като слайдове
screen За комп. екрани
tty За медии, които имат fixed-pitch character grid, като teletypes и terminals
tv За утройства тип телевизор

Спрайтове при изображенията

В този урок ще научим как да изполваме изображенията и какво е спрайт. Задаване на позиция на изолражението и как се разполага по HTML елемента в уеб документа.

Измерения

В този урок ще научим как да задаваме различни стойности за височина и ширина на HTML елементите в уеб документа. Какви са мерните единици за това и как се дефинират в CSS.