RWD media so‘rovlar
CSS media so‘rovlari
CSS media so‘rovlar qurilma xususiyatlari yoki veb-sahifani ko‘rsatayotgan muhitga qarab uslublarni qo‘llash imkonini beradi.
CSS media so‘rovlar moslashuvchan veb-sahifalar yaratish uchun juda muhim.
CSS @media qoidasi stillar jadvalingizga media so‘rovlar qo‘shish uchun ishlatiladi.
Media so‘rovlar bilan breakpoint qo‘shish
Oldingi sahifada grid layout’li veb-sahifa yaratgan edik. Endi katta ekranlarda grid elementlarni qayta joylashtirish uchun media so‘rovlar bilan breakpoint qo‘shmoqchimiz.
Mobile phone
Desktop
Misol
Bu yerda 600px da breakpoint qo‘shish uchun media so‘rovidan foydalanamiz:
@media (min-width: 600px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 2 / span 1;}
.footer {grid-area: 3 / span 6;}
}
O‘zingiz sinab ko‘ring »
Yana bir breakpoint (o‘zgarish nuqtasi)
Xohlagancha breakpoint qo‘shishingiz mumkin.
Desktop
Tablet
Phone
Misol
Bu yerda ekran minimum 600px va minimum 768px bo‘lganda breakpointlar qo‘shish uchun media so‘rovlaridan foydalanamiz:
@media (min-width: 600px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 3 / span 6;}
.footer {grid-area: 4 / span 6;}
}
@media (min-width: 768px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 2 / span 1;}
.footer {grid-area: 3 / span 6;}
}
O‘zingiz sinab ko‘ring »
Odatiy qurilma breakpointlari
Turli balandlik va kenglikdagi juda ko‘p ekran va qurilmalar bor, shu sababli har bir qurilma uchun aniq breakpoint yaratish qiyin. Ishlarni sodda ushlab turish uchun beshta guruhga yo‘naltirishingiz mumkin:
Misol
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
O‘zingiz sinab ko‘ring »
Ekran yo‘nalishi uchun media so‘rovlar
Media so‘rovlar ekran yo‘nalishiga qarab sahifa maketini o‘zgartirish uchun ham ishlatilishi mumkin.
Bu yerda ekran landshaft rejimida bo‘lsa, body fon rangini o‘zgartiramiz:
Misol
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
O‘zingiz sinab ko‘ring »
Elementlarni media so‘rovlar bilan yashirish
Bu yerda biz kichik ekranlardagi elementni yashirish uchun media so‘rovlaridan foydalanamiz:
Misol
/* Hide element if the viewport width is 600px or less */
@media
screen and (max-width: 600px) {
#div1 {
display: none;
}
}
O‘zingiz sinab ko‘ring »
Shrift o‘lchamini media so‘rovlar bilan o‘zgartirish
Bu yerda biz media so‘rovlar yordamida element shrift o‘lchamini turli ko‘rish oynasi kengliklarida o‘zgartiramiz:
Misol
/* If viewport width is 600px or more, set font-size to 80px */
@media screen and (min-width:
600px) {
#div1 {
font-size: 80px;
}
}
O‘zingiz sinab ko‘ring »
Foydalanuvchi sozlamalari uchun media so‘rovlar
Ba’zi foydalanuvchilar harakatga sezgir bo‘lib, kamroq animatsiyali saytlarni afzal ko‘radi.
prefers-reduced-motion media imkoniyati foydalanuvchi animatsiya yoki o‘tishlarni kamaytirishni so‘raganini tekshirish imkonini beradi. Bu imkoniyatdan kompyuterida bu sozlamani yoqgan foydalanuvchilar uchun animatsiya va o‘tishlarni o‘chirish uchun foydalaning:
Misol
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
O‘zingiz sinab ko‘ring »
CSS @media ma’lumotnomasi
Barcha media turlari va ifodalarining to‘liq sharhi uchun CSS ma’lumotnomamizdagi @media qoidasiga qarang.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!