Odatiy qurilma chegara nuqtalari
Keng tarqalgan qurilma chegara nuqtalari (breakpoints) uchun media so‘rovlardan foydalanishni o‘rganing.
Odatiy qurilma chegara nuqtalari (breakpoints)
Balandligi va kengligi turlicha bo‘lgan juda ko‘p ekran va qurilmalar mavjud, shuning uchun har bir qurilma uchun aniq chegara nuqtasini yaratish qiyin. Ishni soddalashtirish uchun beshta keng tarqalgan guruhni nishonga olishingiz 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 »
Tegishli sahifalar
CSS darsligi: CSS media so‘rovlari
CSS darsligi: CSS media so‘rovlari misollari
CSS ma’lumotnomasi: @media qoidasi
RWD darsligi: Media so‘rovlar bilan moslashuvchan veb-dizayn
JavaScript darsligi: window.matchMedia() metodi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!