Étiquette : mediaqueries

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

[Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories

Utiliser les variables mises à disposition par Magento 2

Si votre thème hérite de blank: dans le fichier @product-grid-items-per-row-layout-2-left-screen-s (que vous devrez surcharger dans votre thème), modifiez les valeurs des variables suivantes:

Utiliser la fonction calc de CSS

Pour 4 produits par rangée:

Pour 1 produit par rangée en Mobile, 2 produits par rangée en Tablet, 4 produits par rangée en Desktop:

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

Vous allez vous retrouver à devoir surcharger des choses de ce style:

Dans width: calc((100% - 6%) / 4);, la valeur de 6% correspond à la somme des valeurs des marges margin-left apposées pour une rangée donnée et la valeur 4 au nombre de produits attendus pour une rangée.

Dans mon exemple, j’ai par exemple 2% de marge entre mes produits. 4 produits par rangées = 3x la marge de séparation de 2% = 6%.

[CSS] Des mediaqueries adaptées à chaque marque et version de smartphones et tablettes

Principalement Apple et Samsung, mais pas que … Device Specific CSS Media Queries Collection.

Version de début septembre 2017; vérifier le git pour la version la plus à jour.

[Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To

Code source maintenu ici : https://github.com/franklang/foundation-sites-js-utils/tree/master.

Cette fonction permet de récupérer, au chargement de la page :

  • la valeur (Current) du breakpoint en cours.

Puis chaque fois que la largeur de la fenêtre est modifiée (redimensionnement, passage portrait/paysage, autre…) :

  • la valeur (From) du breakpoint précédent,
  • la valeur (to) du nouveau breakpoint en cours.

Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ

Alternative intéressante: @include-media – Simple, elegant and maintainable media queries in Sass. Couplé à include-media-export – An include-media plugin for exporting breakpoints from Sass to JavaScript.

Avant propos : certains des CMS les plus récents du marché proposent nativement des solutions équivalentes à Sync MQ pour gérer et/ou synchroniser l’exécution de media queries CSS et JS. Pour d’évidentes raisons de compréhension et de maintenabilité de votre code source, je vous conseille de vous tourner plutôt vers ces solutions lorsqu’elles existent.

Sync MQ: pour quoi faire?

Qu’on démarre un projet de site internet de zéro ou qu’un client nous demande une nouvelle mouture, à destination des supports mobiles, de son site existant (qui tourne sous une solution qui ne prend pas en charge les concepts de responsive design), la question de la gestion et de l’adaptation de l’affichage sur différents périphériques de navigation (ordinateurs, tablettes, smartphones) se pose rapidement. Si l’utilisation de media queries s’impose immédiatement comme une évidence dans nos feuilles de styles qu’en est-il en revanche de l’exécution, pour un support donné, de code JavaScript? Et existe-t’il un moyen simple de gérer, d’optimiser votre code CSS (ou LESS, ou SASS, ou autre préprocesseur…) et JS et de synchroniser leur exécution ?

C’est pour répondre à cette double problématique qu’intervient Sync MQ dont le concept est :

  • de simplifier l’écriture et la déclaration de media queries par rapport aux méthodes traditionnelles,
  • de faciliter la synchronisation de l’exécution de media queries tant au niveau de vos styles que du code JavaScript.

Demo sur JSFiddle.net.

Les sources de Sync MQ que vous trouverez sous GitHub à l’heure ou j’écris ces lignes exploitent des dépendances telles qu’Enquire JS et le composant Grid de Bootstrap 3 parce que c’est celles avec lesquelles j’aime travailler. Mais Sync MQ est avant tout un concept que rien ne vous empêche d’intégrer à vos propres habitudes de travail. Vous pouvez tout-à-fait remplacer Enquire JS par la brique mq de Modernizr ou le composant Grid de Bootstrap 3 par celui proposé par le framework Foundation 4.

De l’art de bien choisir ses points de rupture.

=> Web Stats

Et mon code JavaScript dans tout ça?

Quel intérêt de faire appel à une dépendance telle qu’Enquire JS alors qu’une ligne de code JavaScript suffirait à exécuter du code pour un support donné?

Pour un point de rupture donné (mettons, 800px) et suivant le navigateur utilisé, la méthode $(window).width() de jQuery et les Media Queries CSS3 ne sont pas exécutées systématiquement au même moment.

A Code Example of the Difference Between jQuery Window Width and CSS Media Query width measurements.

Dans cet exemple, l’auteur démontre que […].

_sync-mq.scss

On commence par créer des variables aux libellés parlants pour remplacer le code (moins digeste) traditionnellement utilisé en CSS pour la déclaration de media queries.

Comme décrit plus haut, les points de rupture retenus ne ciblent pas uniquement un ou plusieurs supports donnés (iPhone, iPad, Amstrad CPC) en fonction de leurs résolutions mais :

  • des ensembles moyens de résolutions rencontrées par périphériques (Smartphone, Tablette, Desktop),
  • les résolutions que les clients nous demandent le plus souvent de cibler.

Les valeurs affectées à ces variables aux libellés allégés font directement référence à celles des points de rupture définis dans les variables du framework Bootstrap 3 (version SASS).

Ces mêmes valeurs sont immédiatement ré-exploitées dans Bootstrap pour construire les styles du composant Grid.

Aussi, on retrouvera dans Sync MQ parmi les habituelles Smartphone, Tablette et Desktop, des media queries englobant:

  • l’ensemble des Mobiles ($bpMobile pour Smartphone et Tablette),
  • les Tablettes et au-delà ($bpTabletUp),
  • les petits et larges Desktops séparément ($bpSmallDesktop et $bpLargeDesktop).

Pour cibler par exemple les résolutions à partir des tablettes et au-delà, au lieu d’écrire:

J’écris désormais:

Quelques astuces d’utilisation:

  • Lorsque vous choisissez un plug-in JS amené à être exécuté en fonction d’un point de rupture, veillez à ce qu’il possède une méthode .destroy() et/ou .reload(). C’est le cas, par exemple, du carousel BxSlider. La présence de ce type d’options vous dispensera de nettoyer vous-même un DOM modifié par l’exécution d’un plug-in lorsque vous souhaiterez en annuler les effets pour une vue donnée.
  • Trois résolutions sont en réalité disponibles pour Amstrad CPC: 160×200 pixels avec 16 couleurs, 320×200 pixels avec 4 couleurs, et 640×200 pixels avec 2 couleurs. De quoi rentabiliser immédiatement l’utilisation de Sync MQ.

Un peu de documentation:

HTML

CSS (SASS)

JS (enquire, jQuery)

[CSS] Mediaqueries pour affichage Retina

Code CSS

Source : Retina Display Media Query

Pour l’inclusion de visuels en haute résolution, mais seulement pour les écrans qui peuvent les exploiter :

(le pixel-ratio pour un écran Retina étant 2x)

Pour les autres hautes résolutions :

Liste des périphériques par résolution (avec test du périphérique de surf) :

Source : Device pixel density tests

Devices with -webkit-min-device-pixel-ratio: 1.0

All non-Retina Macs
Apple iPhone (1st generation)
Apple iPhone 3G
Apple iPhone 3GS
Apple iPad (1st generation)
Apple iPad 2
Apple iPad mini (1st generation)
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

Devices with -webkit-min-device-pixel-ratio: 1.3

Asus MemoPad HD 7
Google Nexus 7 (2012 model)

Devices with -webkit-min-device-pixel-ratio: 1.4

Nokia Lumia 520

Devices with -webkit-min-device-pixel-ratio: 1.5

Google Nexus S
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
Kindle Fire HD
Samsung Galaxy S II
Sony Xperia Tablet Z
Sony Xperia U

Devices with -webkit-min-device-pixel-ratio: 2.0

All Macs with Retina displays
Apple iPhone 4
Apple iPhone 4S
Apple iPhone 5
Apple iPhone 5c
Apple iPhone 5s
Apple iPhone 6
Apple iPad (3rd generation)
Apple iPad 4
Apple iPad Air
Apple iPad mini (2rd generation)
HTC One X
Google Galaxy Nexus
Google Nexus 4
Google Nexus 7 (2013 model)
Google Nexus 10
Motorola Moto X
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
Sony Xperia T

Devices with -webkit-min-device-pixel-ratio: 2.6

Nokia Lumia 930

Devices with -webkit-min-device-pixel-ratio: 3.0

HTC One (M7)
HTC Butterfly
Huawei Honor 6
Apple iPhone 6 Plus
LG G2
Nexus 5
OnePlus One
Oppo Find 7 (X9076)
Samsung Galaxy S4
Samsung Galaxy Note 3
Samsung Galaxy Note 4
Sony Xperia Z
Xiaomi Mi 3