Les medias queries ou "requêtes média" sont des conditions CSS qui permettent de modifier l'apparence d'une page web en fonction de la largeur de la zone d'affichage. Des points de rupture ou "breakpoints" peuvent être mis en place pour optimiser le contenu d'un site en fonction de certaines typologies d'écrans, comme masquer des contenus pour les petits écrans des mobiles, ajouter des contenus pour les grand écrans des ordinateurs, etc.
La fonction Javascript "breakPointWidth" permet de connaître le plus élevé des points de rupture atteint pour la largeur de la page. Elle utilise la méthode native "matchMedia" pour tester des requêtes media contenant des breakpoints correspondant à des tailles en pixels (par défaut : 1920, 1024, 768, 320).
function breakPointWidth(a) {
a = a || [1920, 1024, 768, 320];
a = a.sort(function(x, y){ return y - x; });
for (var k = 0, l = a.length; k < l; k++) {
if (window.matchMedia('(min-width: ' + a[k] + 'px)').matches) {
return a[k];
}
}
return 0;
}
breakPointWidth();
// renvoie par exemple : 1024Il est possible personnaliser les breakpoints à tester en passant une liste de tailles en arguments de la fonction.
breakPointWidth([1920, 1024]);
// renvoie par exemple : 1920Cet article vous a-t-il été utile ?
Super :)
Merci d'avoir donné votre avis !
Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !