Minimal kenglikdagi va maksimal kenglikdagi media so'rovlarining sintaksisi
E'tiborli veb-dizayn - bu sahifalar tashrif buyuruvchilarning ekran o'lchamlari asosida ularning tartibini va tashqi ko'rinishini dinamik ravishda o'zgartirishi mumkin bo'lgan veb-sahifalarni yaratishning yondashuvidir. Katta ekranlar u kattaroq ekranlarga mos keladigan tartibni olishi mumkin, shuning uchun kichikroq qurilmalar, masalan, uyali telefonlar, o'sha veb-saytni kichikroq ekranga mos ravishda formatlashtirishi mumkin. Ushbu yondashuv barcha foydalanuvchilar uchun yaxshiroq foydalanuvchi tajribasini taqdim etadi va hatto qidiruv tizimining tartibini yaxshilashga yordam beradi. Moslashuvchan veb-dizaynning muhim qismi CSS Media so'rovlaridir.
Media so'rovlari veb-saytingizning CSS-dagi kichik shartli so'zlarga o'xshaydi. Bu sizga CSS-ning ba'zi qoidalarini belgilash imkonini beradi, ular faqat ma'lum bir shartni bajarilgandan so'ng ta'sir qiladi, masalan, ekran o'lchami ma'lum chegaralar yuqorida yoki ostida bo'lsa.
Amaldagi ommaviy axborot so'rovlari
Shunday qilib, veb-saytida Media so'rovlardan qanday foydalanasiz? Bu erda juda oddiy misol:
- Siz har qanday ingl. Uslublardan xoli bo'lgan yaxshi tuzilgan HTML hujjatidan boshlaysiz (CSS uchun bu nimani anglatadi)
- CSS-dagi faylda, siz odatdagidek veb-sahifaning qanday ko'rinishi uchun sahifani formatlash va dastlabki satrlarni belgilashingiz bilan boshlaysiz. Sahifaning shrift hajmini 16 pikselga bo'lishini xohlaysizmi, bu CSSni yozishingiz mumkin: body {font-size: 16px; }
- Keling, katta hajmli ekranlar uchun shrift hajmini oshirishingiz mumkin. Media so'rovlari bu erda boshlanadi. Media Query dasturini shunday boshlashingiz mumkin: @media ekrani va (min-width: 1000px) {}
- Bu Media so'rovining sintaksisi. Media so'rovni yaratish uchun @media bilan boshlanadi. Keyinchalik "media turi" ni o'rnatdingiz, bu holda bu "ekran". Bu stol kompyuter ekrani, planshetlar, telefonlar, va hokazo. Uchun amal qiladi. Nihoyat, Media so'rovini «media xususiyati» bilan yakunlang. Yuqoridagi misolimizda, ya'ni "o'rta kenglik: 1000px". Buning ma'nosi, Media Query kengligi minimal 1000 pikselli displeylar uchun ochiladi degan ma'noni anglatadi.
- Media so'rovining ushbu elementlaridan so'ng siz normal CSS qoidaningda nima qilmoqchi bo'lsangiz, shunga o'xshash jingalak tirnoqni ochasiz va yopasiz.
- Media so'rovining oxirgi bosqichi ushbu shartni bajarishdan so'ng siz qo'llashni istagan CSS qoidalarini kiritishdir. Siz bu kabi CSS qoidalarini Media Query-ni tashkil etuvchi jingalak brauzerlar bilan qo'shasiz: @media ekrani (min-width: 1000px) {body (shrift hajmi: 20px; }
- Media so'rovining shartlari bajarilganda (brauzer oynasi kamida 1000 piksel kenglikda), ushbu CSS usuli bizning saytimizning shrift hajmini biz boshlagan yangi 16 pikseldan 20 pikselgacha o'zgartirib, kuchga kiradi.
Ko'proq uslublar qo'shish
Veb-saytingizning vizual ko'rinishini sozlash uchun zarur bo'lgan ko'plab CSS-qoidalarni ushbu Media so'rovida joylashtirishingiz mumkin. Masalan, shrift o'lchamini 20 pikselgacha oshirishni emas, balki barcha xatlarni rangini qora (# 000000) ga o'zgartirishni xohlasangiz, quyidagilarni qo'shishingiz mumkin:
@media ekrani va (min-kenglik: 1000px) {body (shrift hajmi: 20px; } {{color: # 000000; }}Boshqa ommaviy axborot so'rovlarini qo'shish
Bundan tashqari, har bir kattaroq o'lcham uchun qo'shimcha Media so'rovlarni qo'shishingiz mumkin.
@media ekrani va (min-kenglik: 1000px) {body (shrift hajmi: 20px; } {{color: # 000000; {} @media ekrani va (min-kengligi: 1400px) {body (shrift hajmi: 24px; }}Birinchi Media so'rovlari 1000 piksel kenglikda, shrift o'lchamini 20 pikselgacha o'zgartiradi. So'ngra, brauzer 1400 pikseldan yuqori bo'lganidan so'ng, shrift hajmi yana 24 pikselga o'zgaradi. Muayyan veb-saytingiz uchun zarur bo'lgan ko'plab ommaviy axborot so'rovlarini qo'shishingiz mumkin.
Min-kenglik va maksimal kenglik
Media so'rovlarini yozishning ikki yo'li mavjud: "min-width" yoki "max-width". Hozirgacha biz "minimal" kenglikda harakat qildik. Bu brauzer hech bo'lmaganda minimal kenglikga yetganida Media so'rovlarini faollashishiga sabab bo'ladi. Shunday qilib, brauzer kamida 1000 piksel kenglikda "min-width: 1000px" dan foydalanadigan so'rov qo'llaniladi. "Media so'rovlar" uslubi saytni "uyali ko'chirish" usulida qurishda foydalaniladi.
Agar siz "max-width" dan foydalansangiz, u teskari tarzda ishlaydi. Brauzer bu hajmdan pastroqqa tushgandan so'ng, "max-width: 1000px" ning Media so'rovi qo'llaniladi.
Qadimgi brauzerlar haqida
Media-so'rovlar bilan bog'liq muammolardan biri Internet Explorer-da eski versiyalarda ularning etishmasligi. Yaxshiyamki, bu eski brauzerlarda Media so'rovlarini qo'llab-quvvatlashi mumkin bo'lgan polifillatkalar mavjud bo'lib , bugungi kunda bu veb-saytlardan foydalanishga imkon berib, o'sha saytni ko'rsatish eski brauzer dasturlarida buzilmaganligini ta'minlamoqda.
Jeremy Girard 1/24/17 yil tahrirlangan