Ең үлкен ені мен ең көп ендірілген медиа сұрауларына арналған синтаксис
Жауапкершілікті веб-дизайн - бұл беттер беттердің келбеті негізінде олардың орналасуын және сыртқы көрінісін динамикалық түрде өзгерте алатын веб-беттерді құру тәсілі. Үлкен экрандар үлкенірек дисплейлерге ыңғайлы орналасуды ала алады, ал ұялы телефондар сияқты кішігірім құрылғылар бірдей веб-сайтты кішірек экранға сәйкес келетін түрде пішімдей алады. Бұл әдіс барлық пайдаланушылар үшін жақсы пайдаланушы тәжірибесін қамтамасыз етеді және ол тіпті іздеу жүйелерінің рейтингісін жақсартуға көмектеседі. Сәулеттік веб-дизайнның маңызды бөлігі - CSS Media Queries.
Медиа сұраулары веб-сайттың CSS файлының ішіндегі шартты емес мәлімдемелер сияқты, белгілі бір шартты орындағаннан кейін ғана әсер ететін белгілі бір CSS ережелерін орнатуға мүмкіндік береді, мысалы экран өлшемі белгілі бір шектерден жоғары немесе төмен болса.
Медиа сұраулар әрекетінде
Сонымен, веб-сайтта Медиа сұрауларын қалай пайдаланасыз? Міне, қарапайым мысал:
- Сіз кез-келген көрнекі стильден тыс жақсы құрылымдалған HTML құжатынан бастай аласыз (CSS үшін бұл)
- Сіздің CSS-файлыңызда, әдетте, бетті стилдеу және веб-сайттың қалай көрінетіні туралы бастапқы деректер базасын орнату арқылы бастай аласыз. Бет шрифтінің өлшемі 16 пиксель болуын қалайтыныңызды айтыңыз, сіз осы CSS жазуыңыз мүмкін: body {font-size: 16px; }
- Енді сіз оны кеңейтетін үлкен экрандар үшін қаріп өлшемін ұлғайтқыңыз келуі мүмкін. Media Query басталатын жерде: Media Query келесідей: @media экраны және (min-width: 1000px) {}
- Бұл Media Query синтаксисі. Media Query өзін құру үшін @media арқылы басталады. Содан кейін бұл жағдайда «экран» болып табылатын «медиа-тип» белгіленді. Бұл жұмыс үстелі компьютерінің экрандарына, планшеттеріне, телефондарына және т.б. қолданылады. Ақырында, Media Query қызметімен «медиа мүмкіндігі» арқылы аяқталады. Жоғарыда келтірілген мысалда, яғни «mid-width: 1000px». Бұл Media Query ені 1000 пиксель ені ең аз ені бар дисплейлер үшін басталатындығын білдіреді.
- Media Query элементтерінің элементтерінен кейін сіз кез-келген қалыпты CSS ережесінде не істейтіндігіңе ұқсас сияқты ашық және жабық бұйра тырнақшаны қосасыз.
- Медиа сұрауына арналған соңғы қадам - бұл шартты орындағаннан кейін қолданғыңыз келетін CSS ережелерін қосу. Сіз осы CSS ережелерін Media Query құрайтын бұйра жақшалар арасында қосасыз: @media экран және (min-width: 1000px) {body (font-size: 20px; }
- Media Query шарттарымен кездескенде (браузер терезесі ені 1000 пикселден кем болмаса), бұл CSS мәнері біздің сайтымыздағы қаріп өлшемін біз бастапқыда 20 пиксельдің жаңа мәніне өзгерткен 16 пиксельден өзгертеді.
Қосымша мәнерлерді қосу
Веб-сайтыңыздың көрнекі көрінісін реттеуге қажет болатын осы Медиа Сұхбатында көптеген CSS ережелерін орналастыруға болады. Мысалы, қаріп өлшемін тек 20 пиксельге дейін ұлғайтпай қана қоймай, барлық абзацтардың қара түсіне (# 000000) өзгертетінін қаласаңыз, мынаны қосуға болады:
@media экран және (ені: 1000px) {body-size (font-size: 20px; } p {түсі: # 000000; }}Қосымша мультимедиа сұрауларын қосу
Бұған қоса, сіз кез келген үлкен өлшемдерге қосымша Медиа сұрауларын қоса аласыз, оларды мына сияқты стилі парағына қосасыз:
@media экран және (ені: 1000px) {body-size (font-size: 20px; } p {түсі: # 000000; {@media экран және (min-width: 1400px) {body {font-size: 24px; }}Алғашқы медиа сұраулары 1000 пикселден еніп, қаріп өлшемін 20 пикселге өзгертеді. Содан кейін браузер 1400 пиксельден жоғары болған кезде, қаріп өлшемі қайтадан 24 пикселге дейін өзгереді. Белгілі бір веб-сайт үшін қажет болғанда, көптеген Медиа сұрауларын қоса аласыз.
Мин-ені мен ең үлкен ені
Медиа сұрауларын жазудың екі жолы бар - «min-width» немесе «max-width». Осы уақытқа дейін біз «минималды енді» көрдік. Бұл браузер кемінде ең төменгі енге жеткенде Media Queries күшіне енеді. Сондықтан «min-width: 1000px» дегенді пайдаланатын сұрау браузер ені 1000 пикселден кем болмаса қолданылады. Медиа сұраудың бұл стилі сайтты «мобильді-бірінші» тәсілмен құрастырғанда пайдаланылады.
Егер сіз «max-width» функциясын пайдалансаңыз, ол керісінше жұмыс істейді. «Максималды ені: 1000px» деген бұқаралық ақпарат құралының шолуы браузер осы өлшемнен төмен түсірілгеннен кейін қолданылады.
Ескі браузерлерге қатысты
Медиа сұрауларымен бір мәселе Internet Explorer-дің ескі нұсқаларында қолдаудың жоқтығы. Бақытымызға орай, ескі браузерлерде Медиа сұрауларына қолдау көрсетуге болатын полифоллерлер бар , олар бүгінгі күні оларды веб-сайттарда пайдалануға мүмкіндік береді, алайда бұл сайттың көрсетілімі бұрынғы браузерлердің бағдарламалық жасақтамасында бұзылмайтындығын қамтамасыз етеді.
Jeremy Girard 1/24/17 жылы редакцияланған