Media so‘rov misollari
CSS media so‘rovlari misollari
Media so‘rovlar turli qurilmalarga moslashtirilgan stillar jadvalini yetkazishning mashhur usulidir.
Oddiy misol ko‘rsatish uchun turli qurilmalar uchun fon rangini o‘zgartirishimiz mumkin:
Misol
Turli ko‘rish oynasi kengliklari uchun fon rangini o‘zgartirish uchun media so‘rovlardan foydalanish:
/* Base style for mobile devices */
body {
background-color:
olive;
color: white;
}
/* For devices with a minimum width
of 768px (Medium) */
@media screen and (min-width: 768px) {
body
{
background-color: blue;
color:
white;
}
}
/* For devices with a minimum width of 992px
(Large) */
@media screen and (min-width: 992px) {
body {
background-color: tan;
color: black;
}
}
O‘zingiz sinab ko‘ring »
Ustunlar uchun media so‘rovlar
Media so‘rovlarinng keng tarqalgan usuli — moslashuvchan maket yaratish. Bu misolda turli ekran o‘lchamlariga qarab to‘rt, ikki va to‘liq kenglikdagi ustunlar o‘rtasida o‘zgaradigan maket yaratamiz:
Large screens:
Medium screens:
Small screens:
Misol
* {
box-sizing: border-box;
}
/* Container for flexboxes */
.container {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from
four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make
the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
O‘zingiz sinab ko‘ring »
Flexible Box Layout moduli haqida ko‘proq bilish uchun CSS Flexbox bobimizni o‘qing.
Moslashuvchan veb-dizayn haqida ko‘proq bilish uchun Responsive Web Design darsligimizni o‘qing.
Menyular uchun media so‘rovlar
Bu yerda media so‘rovlar yordamida turli ekran o‘lchamlarida dizayni o‘zgaradigan moslashuvchan navigatsiya menyusi yaratamiz.
Misol
ul {
list-style-type: none;
margin: 0;
padding:
0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li
a:hover {
background-color: #111111;
}
/* For viewport
width 600px or less, make the menu links stack on top of each other */
@media screen and (max-width: 600px) {
ul {flex-direction: column;}
}
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 »
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 »
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 »
Moslashuvchan rasm galereyasi
Bu yerda biz moslashuvchan rasm galereyasi yaratish uchun media so‘rovlar va flexbox’ni birga ishlatamiz:
Moslashuvchan veb-sayt
Bu yerda moslashuvchan veb-sayt yaratish uchun media so‘rovlar va flexbox’ni birga ishlatamiz:
CSS moslashuvchan veb-dizayn
Moslashuvchan veb-dizayn haqida ko‘proq bilish uchun Responsive Web Design darsligimizni o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!