CSS медиавӣ дархостҳо: марҳила ба марҳила Тавсифи, хусусиятҳо ва шарњи

Як бор бар як вақт, касоне, ки боздид аз сомонаҳои барои смартфонҳо ва дастгоҳҳои мобилӣ монанд, ки боиси ба дигарон танҳо механданд. Бисёриҳо танҳо фаҳмида наметавонистам, ки чаро ин зарур аст, зеро чунин компютерҳои рӯимизӣ бароҳат нест! Ё, дар бадтарин, ноутбукхо. Илова бар ин, Интернети мобилӣ, пас гарон буд.

Time гузашт. Интернет арзонтар шуд. Фурӯши берун омада телефонҳои ва лавҳаҳои бештар ва бештар. Чанде пас, соҳибони сомонаҳои маъруф муаммо хоридан сари ӯ. Бино ба омор, дар он зоҳир шуд, ки захираҳои онҳо эҳтимоли зиёд сафари смартфонҳо онҳо бештар аз як компютери статсионарї!

Дар он вақт ба сомонаҳо шудааст, барои тамошои оид ба дастгоҳҳои мобилӣ optimized нест. Рафтан ба ҳаёти сола ба телефони шумо, шумо дошта бошад, мазмуни бо ҳарфҳои хурд, адад меню хурд ва тугмаҳои нороҳат.

Дар пайдоиши CSS медиавӣ дархостњои

буд, зарурати ба зиммаи захирањои, то ки онҳо назар хуб, вақте аз экрани ҳисоб нест. Аввал амалияи таъсиси ҷойҳои алоҳида барои ҳар як андозаи паҳн. Масалан, ба меҳмонон, ки истифодаи телефони мобилӣ, Шуморо ба як захираҳо ва касе, ки "нишаст" бо компютери худ даст - аз тарафи дигар. Аммо он дароз, гарон ва нороҳат шуд.

Сипас CSS3 Media дархостњои омад. Бо онҳо имконияти оддӣ татбиқи тарҳи динамикӣ омад.

тарҳи динамикӣ чӣ гуна аст?

Зери ин мафҳум истифода бурда мешавад, агар намуди захираҳои мувофиқи андозаи экран, ки дар он дидан тағйир медиҳад. Чӣ тавр фаҳмидани ин? Ин хеле оддист.

Тасаввур кунед, ки шумо як сомонаи. Дар қисми болоии он аст, менюи новбари нест. Уфуқӣ. Он бар тамоми паҳнои саҳифаи меафканад. Дар зер, ки дар як блок бо Маълумот барои тамос аст. Телефон ва суроғаи низ аз ҷониби ду блокҳои хонем ва ба таври уфуқӣ ташкил шафати якдигар. Дар доираи ин блок - мазмуни асосӣ, ва дар бораи ба чап ё рост аз панели аст. Дар зер, маъмулӣ, номаи.

Ин Диаграммаи тарҳбандии «классикӣ». Ин комил барои як компютери шахсӣ, балки хеле қулай барои телефонҳои мобилӣ аст. Менюи уфуқӣ низ васеъ аст. Тамос дур аз якдигар ҷойгир шудааст. Барои истифодаи маълумот аз панели ва ҳама ба ҳаракат экран, ва он ба таъми ҳама не.

Дар масъалаи мумкин аст бо истифода аз намунаи мутобиқшавӣ ва мобилӣ бо CSS3 медиавӣ дархостҳо ҳал карда мешавад. Бо истифода аз дархостҳои ВАО, мо таҷдиди ҷойгиршавии мундариҷа ... Акнун аз он мисли ин кор:

• боло - воҳиди бо менюи новбари амудї;
• дар зери он - блоки бо алоқаҳо, ки ҳозир ҳам амудӣ ҷойгир;
• мазмуни панели аст, дар канори <асосии> маводи теги нишон дода нашавад, ва болои он.

Ин як намунаи оддӣ чӣ метавонад бо Дизайн иҷобат Web медиавӣ дархостњои анҷом мешавад. Дар ҳақиқат имкониятҳо бисёр бештар.

Пас, он чиро, ки дархостҳои ВАО аст?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. Дар доираи CSS медиавӣ дархостњои CSS3 дарк модул дарозмуддат, ки бо он шумо метавонед мундариҷаи ин саҳифа барои мутобиқ шудан ба шароити муайян. Барои мисол, аз он оғоз ба вокуниш ба андозаи экран, ё дастгоҳи шиносоӣ (портрет / манзараи).

Тавре ки аз системаи дарк мекунад, ки зарурати тағйир додани мазмуни? Он истифода мебарад, дархостҳои ВАО. Онҳо параметрҳои баъзе муайян мекунад. Агар дастгоҳи, ки аз он як меҳмони ба сомонаи омада, ба талаботи ин параметрҳои, аз ҷумла сабкҳои пеш дорухат. Онҳо метавонанд ҳамчун як мизи CSS умумии ё хаттӣ, дар файли алоҳида.

CSS медиавӣ дархостњои Мутобиқати Browser

Safari до Chrome. Ҳамаи браузерҳои муосир дастгирии ин технология, аз сафари ба Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. Албатта, истифодабарандагони версияҳои калонии Internet Explorer доранд, мушкилоти ... аммо биёед онро ростқавлона рӯ ба рӯ мешаванд - онҳое, ки то ҳол бо истифода шудаанд калонсол IE, танҳо дар бораи чизе боиси пайдоиши мушкилиҳо мегардад.

Наҳвӣ тарҳбандии мутобиқшавӣ медиавӣ дархостњои

html. Шояд шумо низ ба дархостҳои ВАО, ки иборатанд аз сабки файл ба HTML фош шудааст. Дар хотир доред, ки дар хати? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. < 'Варақаро' rel = пайванд намуди = 'Матни / CSS' href = HTTP: // сомонаи /article/320575/%E2%80%99style.css%E2%80%99%3E Баъзан дар охири илова параметри дигар, 'экрани' = ВАО: ки чун нигарист.

Ин дархости ВАО аст! Вай нишон медиҳад, ки файли сабки муайян дар дастгоҳҳои муҷаҳҳаз бо телевизорҳои кор хоҳад кард. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. Ба ҷои ин, шумо метавонед экрани чоп муайян - дар ин њолат, сабкҳои файл истифода мешаванд, ки агар саҳифаи чоп карда мешавад.

Шумо метавонед хусусиятҳои зерин истифода баред:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; ҳама - нусхаи умумӣ, истифода хомӯш аст, дар ҳама ҳолатҳо истифода бурда мешавад;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - экранҳои (компютер, ноутбук, лавҳаҳои, смартфонҳо ва ҳама ба намоиш муҷаҳҳаз);
• принтеры; чоп - Чопгарҳо;
• – проекторы; Дурнамои - проектор;
• – речевые браузеры; браузерҳо баромад - сухан;
• – для устройств для слабовидящих; Брайл - дастгоҳҳо барои биноиши;
• – для экранов телевизоров. ТВ - барои экранҳои ТВ.

Ин ҳама нест. , но они используются редко. якчанд CSS иловагӣ медиавӣ дархостњои хусусиятҳои вуҷуд дорад, вале онҳо хеле кам истифода бурда мешавад. all. Илова бар ин, шумо як параметр муайян карда наметавонед - бо нобаёнӣ дар ҳама.

Сохтори дархостҳои ВАО

css. Ба ҷои эҷоди файли сабки, шумо метавонед рамзи CSS истифода баред. Ин мисли ин назар:

(тут будут стили } экрани @media ва (макс-паҳнои: 1024px) {( сабкҳои вуҷуд доранд}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. Баъд аз дастури @media, ки ошкор мекунад, ки дархости ВАО истифода бурда мешавад, аст, зикри навъи дастгоҳ (экран - экран) нест ва параметрҳои иловагӣ. Max Width. Дар ин мисол, истифода аз молу мулки CSS медиавӣ дархостњои Макс Width. px. Ин маънои онро дорад, ки дар сабкҳои номбаршуда дар Мисолҳои ҷалб хоҳад шуд, ки агар истифодабаранда аз андозаи экрани дастгоҳ аз 1024 ҳимоя карда. и and не обязательны. Screen мекунад ва ҳатмӣ нест. Шумо метавонед ин нависед:

@media (макс-паҳнои: 1024px) {}

Дар чунин ҳолат, объектҳои ба шавад дар дастгохи дилхоҳ истифода бурда, на танҳо онҳое, ки бо телевизорҳои муҷаҳҳаз гардидааст.

Таъинкунии параметрҳои гуногун

Фарз мекунем, ки шумо мехоҳед, ки ба маҳдуд кардани доираи якчанд дастгоҳҳое, ки истифода бурда мешаванд, интихоб сабки. px, но не больше 500 px. Биё мегӯянд, ки шумо мехоҳед, ки ба зоҳир хосиятҳои танҳо онҳое, ки сомонаи худро аз смартфон боздид, ба андозаи экран аст, камтар аз 320 ҳимоя карда, вале на зиёда аз 500 ҳимоя карда аст. Дар чунин ҳолат, дархости мегирад шакли:

@media (дақ-паҳнои: 320px) ва (макс-паҳнои: 500px) {}

and. Агар шумо бо барномарезии ошно ҳастанд, ба шумо NJ чӣ оператор аст, истифода бурда мешавад ва. Барои касоне, ки намедонанд,: он месанҷад, агар ҳам шароити ҳақиқӣ мебошанд. хосиятҳои E. Пайвастшавӣ дар экран дархости бояд на камтар аз 320 ва на зиёда аз 500 пиксел бошад.

and не ограничивается одним. Ва шумораи операторони ба яке маҳдуд карда намешавад. Шумо метавонед ба онҳо қадри шумо мехоҳед гузошт. Масалан, кӯшиш кунед, ки ба сохтани экранҳои андозаи муайян барои смартфонҳо ва хеле гуногун - барои телевизорҳои.

Аз ҳама муҳим - Самти дастгоҳ истифодабаранда. Касе дидани вебсафҳаҳо дар смартфони худ дар тамоюли портрет, касе - бо манзараи. orientation:portrait, для вторых, соответственно, orientation:landscape. Барои собиқ, ба шумо хоҳад шиносоӣ ҳолати иловагӣ лозим аст: портрет, барои дуюм, мутаносибан, шиносоӣ: Манзараи. @media. Ин хатҳои низ дар қавс зерин @media дастаи нишон дода шудааст. and. Шумо метавонед ба онҳо аз тариқи мубодила ва.

Боз nuance шавқовар. and вы вполне можете использовать оператор or. Ба ҷои ин, шумо инчунин метавонед истифода баред ё оператори. Ӯ на камтар аз як ҳолати бояд дар дархост ба рост! Барои мисол:

) {} @media (макс-паҳнои: 500px) ё (тамоюли: портрет) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. Агар экран камтар аз 500 ҳимоя карда ё истифодаи тамоюли портрет аст, ки Мисолҳои хоҳад сабкҳои таъсири мегирад.

Ибораи калидӣ барои ҷарима-Танзими нест,

not. Дар Дархости ВАО, шумо метавонед калимаи гузоред нест. Ин кор ба анҷом зайл аст:

@media (на макс-паҳнои: 700px ) {}

Хосиятҳои доранд, фаъол, агар ҳадди паҳнои аст, ки ба 700 пиксел, баробар нестанд.

хусусиятҳои ВАО

Дар дархостҳои метавонад якчанд вазифаҳои қаблан таъсис дода мешавад. W3C. Шинос шавед бо ҳамаи шумо метавонед онлайн W3C. Аксари coders кофӣ барои худ се асосӣ иборат мебошад:

• (о нем мы уже говорили); тамоюли (мо аллакай дар бораи он гуфтугӯ);
• (ширина, ее тоже упоминали); паҳноии (бари, он аст, низ зикр);
• (высота). баландии (баландии).

Баландӣ аст, кам истифода бурда мешавад, вале як чанд ҳолатҳое, ки ин параметр метавонад муфид бошад, нест.

Чӣ тавр ва дар куҷо ба ҷои дархостҳои?

Бисёре аз Интернет-дизайнерҳо гӯё онҳоро то ба охир аз сабкҳои файл гузошт. Барои мисол, дар аввал рўйхати сабки асосӣ, ва он гоҳ, ки дар поёни ҳуҷҷат, дархост љойгир карда шавад.

Ин аст, хеле хуб нест. Хеле қулай ба ҷои объектҳо барои дастгоҳҳои гуногун дуруст пас аз сабкҳои асосии. Барои мисол, шумо як Лиг, ки танзим ранги сурх:

Лиг {

Ранги: сурх;

}

Дарҳол пас аз дархости нишон:

@media (дақ-паҳнои: 320px) {}

Пешбинї мекунад хосиятҳои.

Чунин равиш бошад тоқатфарсо, агар шумо бо истифода аз «пок» CSS. Ба кӯмаки ин preprocessor. Онҳо зиёде доранд, имкониятҳои ҷолиб барои дархостҳои ариза дақиқ бештар.

Дигар хосият - љойгир намудани объектҳои барои дастгоҳҳои гуногун дар файлҳои сабки гуногун. Ин аст, махсусан агар шумо истифода дастуреро preprocessor ба ворид мекунад. Дар натиҷа як осон таҳрир, рамзи пок аст.

Кадом яке аз истифода баред? Ҳамаи он оид ба афзалиятҳои шахсӣ ва хусусиятҳои даста вобаста аст. Шояд, дар ҷои кори худ дорад, як роҳи муайян љойгир намудани дархостҳои ВАО пазируфта нахоҳад шуд.

Инчунин фаромӯш накунед, ки шумо метавонед зиндагии худро бо нармафзори навтарин содда. Ин аст, танҳо дар бораи preprocessor нест. Бо Ҷуръа Гурӯҳи медиавӣ CSS дархостњои метавонад ба раванди хеле осон кунад. Тавсия Азхудкунии ин асбоби ва ё ягон analogs он.