@media
@media հարցման միջոցով ոճ է սահմանվում՝ ելնելով սարքավորման տեսակից և էկրանի չափերից։
@media-ի սինտաքսն է՝
@media սարքավորման տեսակը and | not | only (media պարամետրերը) {
Css կոդ
}
Նույնը հնարավոր է կատարել <link> էլեմենտի միջոցով՝
<link rel= "stylesheet" media= "screen and (max-width: 600px)" href= "style.css">
Սարքավորման տեսակները՝
| ՏԵՍԱԿԸ | ՆԿԱՐԱԳՐՈՒԹՅՈՒՆԸ |
| all | Բոլոր տեսակի սարքավորումների համար։ |
| braille | Բրայլ համակարգի վրա հիմնված սարք, որը նախատեսված է տեսողության խնդիրներ ունեցողների համար։ Այս տեսակը հնացած է և այլևս չի օգտագործվում։ |
| embossed | Բրայլ տեսակի պրինտերների համար։ |
| handheld | Սմարթֆոնների և նմանատիպ սարքերի համար։ |
| Պրինտերների և այլ տպող սարքերի համար։ | |
| projection | Պրոեկտրների համար։ |
| screen | Համակարգչի մոնիտորների համար։ |
| speech | Խոսացող բրաուզերների համար։ |
| tty | Տերմինալների և սահմանափակ էկրանների համար։ |
| tv | Հեռուստացույցների համար։ |
Մեդիա հարցումների տրամաբանական օպերատորներ
and
and – նախատեսված է սահմանելու մի քանի պայմաններ․ օրինակ՝
@media screen and (max-width: 600px) {
p {color: red;}
}
Ոճը կվերաբերի բոլոր տեսակներին, բացի սմարթֆոններից։ Դրանց էկրանի մաքսիմալ լայնությունը՝ 600px:
Հետևյալ օրինակում կմերժվի թե առաջին և թե երկրորդ պայմանը՝ էկրանի լայնությունը չպետք է լինի 600px և՝ screen տեսակի։
@media not screen and (device-width: 600px)
only
only – նախատեսված է @media հարցման պայմանները հին բրաուզերներից ծածկելու համար՝ որոնք չեն աջակցում @media կանոնը։
Այն բրաուզերները, որոնք աջակցում են, only օպերատորը կանտեսեն։
or
or – մի քանի պայմաններ սահմանելու դեպում, դրանք իրարից առանձնացվում են ստորակետներով, որոնք « or » օպերատորներն են։
Ոճը կօգտագործվի, եթե պայմաններից գոնե մեկը համապատասխանում է՝
@media (min-width: 700px), (orientation: landscape) {
p {color:red;}
}
Ոճը կսահմանվի, եթե էկրանի լայնությունը 700px և ավելին է, կամ՝ սարքավորումը հորիզոնական ուղղությամբ է( այսինքն երբ էկրանի լայնությունն ավելին է քան բարձրությունը)։
media հատկություններ
Մեդիա հատկությունների միջոցով սահմանվում են սարքավորման լրացուցիչ պայմաններ։
aspect-ratio(min-aspect-ratio, max-aspect-ratio)
aspect-ratio(min-aspect-ratio, max-aspect-ratio) – Սահմանում է տեսադաշտի լայնության և բարձրության հարաբերությունը։
Այս հատկության արժեքը բաղկացած է երկու դրական թվերից՝ իրարից սլեշով( / ) առանձնացված: Առաջինը հանդիսանում է հորիզոնական ուղղությունը, իսկ երկրորդը՝ ուղղահայաց։
Մեդիա տեսակը, որի հետ կօգտագործվի – handheld, print, projection, screen, tty, tv:
Ինչպիսի տեսք կունենան aspect ratio-ի սահմանումները՝
Ինչպե՞ս հաշվել 16 / 10 հարաբերությունը․
@media screen and (min-aspect-ratio: 16/10) {
p { color: red; }
}
16 / 10 հարաբերությունը սովորաբար նոթբուքերի էկրաններն են։
Ենթադրենք որևէ էլեմենտի լայնությունը հավասար է 600px-ի․ 16 / 10 հարաբերությունը կնշանակի՝ 600-ը բաժանել 16-ի և արդյունքը՝ 37,5-ը, բազմապատկել 10-ով։ Վերջնական արդյունքը՝ 375-ը, էլեմենտի բարձրությունն է։
Օրինակ՝
color(min-color, max-color)
Մեդիա տեսակը, որի հետ կօգտագործվի – handheld, print, projection, screen, tty, tv:
Այս հատկությունը սահմանում է էկրանի գույների քանակը՝ ըստ նշված բիտերի։
Ամեն բիտ բաղկացած է երկու տեսակի գույնից։ Երկու բիտ կնշանակի, որ կունենանք 2×2=4 տեսակի գույն, երեք բիտ՝ 2x2x2=8 տեսակի գույն և այլն։
Ցանկացած գույն ստացվում է երեք գույների խառնուրդից՝ red-կարմիր, green-կանաչ, blue-կապույտ․ սրանք գույների երեք կանալներն են։ Երբ սահմանվում է բիտերի քանակը, դա վերաբերում է կանալներից յուրաքանչյուրին։ Եթե սահմանված է, ենթադրենք 3, ապա յուրաքանչյուր կանալ կունենա 3 բիտ տեսակի գույն, այսինքն ընդհանուր 9 բիտ, որը կնշանակի՝ 2x2x2x2x2x2x2x2x2 = 512 տեսակի գույն։
Օրինակ՝
@media screen and (color) {…}
երբ բիտը նշված չէ, ապա կարող է լինել ցանկացած տեսակի գունավոր սարքավորում։
@media screen and (min-color: 3) {…}
սա կնշանակի՝ էկրանը պետք է ապահովի 512 և ավելի տեսակի գույն։
color-index (min-color-index, max-color-index)
Մեդիա տեսակը, որի հետ կօգտագործվի – handheld, print, projection, screen, tty, tv:
Եթե վերը նշվածում բիտերի միջոցով էր որոշվում, թե քանի գույն է ապահովելու սարքավորումը, ապա այստեղ նշվում է հենց գույների քանակը։
Օրինակ՝
@media screen and (min-color-index: 256) {…}
այսինքն սարքավորումը պետք է ապահովի 256 և ավելի քանակի գույն։
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Այս հատկությունը դուրս է եկել օգտագործումից։
device-height (min-device-height, max-device-height)
կամdevice-width(min-device-width, max-device-width)
@media screen and (min-device-height: 500)
Հնացած են և դուրս են եկել օգտագործումից։ Կհանդիպենք միայն հին պրոեկտներում։
grid
@media all and (grid: 1)
Մեդիա տեսակը, որի հետ կօգտագործվի – all:
Սարքավորման էկրանը պետք է լինի grid տարբերակով։ Դրանք, օրինակ տեքստային տերմինալներն են կամ հին ոչ սմարթֆոն հեռախոսները(միագույն)։
« grid: 1 » –grid տեսակի սարքավորումների համար, իսկ « grid: 0» -ժամանակակից սարքավորումների համար։
height(min-height, max-height)
@media screen and (min-height: 500px)
Մեդիա տեսակը, որի հետ կօգտագործվի – բոլորը, բացի speech-ից։
Սահմանում է ցուցադրվող տարածքի բարձրությունը։
min-height -տարածքի մինիմալ բարձրությունը։
max-height -տարածքի մաքսիմալ բարձրությունը։
width(min-width, max-width)
@media screen and (min-width: 500px)
Մեդիա տեսակը, որի հետ կօգտագործվի – բոլորը, բացի speech-ից։
Սահմանում է ցուցադրվող տարածքի լայնությունը։
min-width -տարածքի մինիմալ լայնությունը։
max-width -տարածքի մաքսիմալ լայնությունը։
monochrome(min-monochrome, max-monochrome)
@media print and (min-monochrome: 3)
Մեդիա տեսակը, որի հետ կօգտագործվի – handheld, print, projection, screen, tty, tv:
Սահմանում է ոճ մոնոխրոմ սարքավորումների համար, որոնք միագույն են․ օրինակ՝ սև ու սպիտակ տպող պրինտերները։ Եթե նշված է ենթադրենք 3, ապա սարքավորումը կարող է ապահովել մեկ գույնի 3 բիտ քանակի երանգ։
Օրինակ՝
@media print and (monochrome) { … }
Ցանկացած տեսակի մոնոխրոմ պրինտեր։
@media print and (min-monochrome: 3) {…}
մոնոխրոմ տեսակի պրինտեր, որը մինիմալ ապահովում է գույնի 3 բիտ քանակի երանգ։
@media print and (monochrome: 0)
ոչ մոնոխրոմ պրինտեր։
orientation(orientation: landscape կամ orientation: portrait)
@media handheld and (orientation: landscape) {…}
Մեդիա տեսակը, որի հետ կօգտագործվի – handheld, print, projection, screen, tty, tv:
Ոճը կսահմանվի, եթե սարքավորումը ուղղահայաց(portrait) կամ հորիզոնական(landscape) ուղղությամբ է:
resolution (min-resolution, max-resolution)
@media handheld and (min-resolution: 300dpi)
Մեդիա տեսակը, որի հետ կօգտագործվի – handheld, print, projection, screen, tv:
Այս հատկության արժեքը սահմանվում է dpi, dpcm կամ dppx-ով։
dpi -մեկ դյույմում( հավասար է 2.54 սանտիմետրի) էկրանի ֆիզիկական պիքսելների քանակը։
dpcm մեկ սանտիմետրում էկրանի ֆիզիկական պիքսելների քանակը։
dppx -հավասար է ֆիզիկական 1px -ին։
Օրինակ՝ min-resolution: 300dpi –մեկ դյույմում ֆիզիկական պիքսելների քանակը մինիմում պետք է հավասար լինի 300 -ի։
scan(interlace կամ progressive)
@media tv and (scan: progressive)
Մեդիա տեսակը, որի հետ կօգտագործվի – tv :
Որոշում է հեռուստացույցի էկրանի սկանավորման տեսակը․
interlace – սկանավորման ժամանակ հեռուստացույցը սկզբում ցույց է տալիս կադրի կենտ տողերը, հետո՝ զույգերը։
progressive -սկանավորման ժամանակ կադրը փոխանցվում է և ցուցադրվում ամբողջությամբ։
Interlace -ի օրինակը նկարով՝
Armenian 
Russian