JS media so‘rovlari
Misol
Agar viewport kengligi 700 pikseldan kichik yoki unga teng bo‘lsa, fon rangini sariqqa o‘zgartiring. Agar 700 dan katta bo‘lsa, pushti rangga o‘zgartiring
function myFunction(x) {
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// Create a MediaQueryList object
var x = window.matchMedia("(max-width: 700px)")
// Call listener function at run time
myFunction(x);
// Attach listener function on state changes
x.addEventListener("change", function() {
myFunction(x);
});
O‘zingiz sinab ko‘ring »
JavaScript bilan media so‘rovlardan foydalanish
Media so‘rovlar (media queries) CSS3’da joriy etilgan bo‘lib, moslashuvchan veb-dizaynning asosiy tarkibiy qismlaridan biridir. Media so‘rovlar veb-sahifalar barcha qurilmalarda (kompyuterlar, noutbuklar, planshetlar, telefonlar va h.k.) yaxshi ko‘rinishi uchun viewport kengligi va balandligini aniqlashda ishlatiladi.
window.matchMedia() metodi ko‘rsatilgan CSS media so‘rov stringi natijalarini ifodalovchi MediaQueryList obyektini qaytaradi. matchMedia() metodining qiymati CSS @media qoidasining istalgan media xususiyati bo‘lishi mumkin, masalan min-height, min-width, orientation va h.k.
Media so‘rovlar haqida CSS media so‘rovlari darsligimizda batafsil bilib oling
Moslashuvchan dizayn haqida Moslashuvchan veb-dizayn darsligimizda batafsil bilib oling
window.matchMedia() metodi haqida JavaScript ma’lumotnomamizda batafsil bilib oling.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!