Tagmedia

[Change cross commerce] Formats prédéfinis des visuels

Les formats des visuels sont prédéfinis dans les fichiers suivants :

  • ../App/Config/project.autogen.json pour les chemins d’accès sur le serveur
  • ../Plugins/Themes/Rbs/Base/Assets/less/image-formats.less pour les formats d’image

A savoir : il faut obligatoirement modifier les deux fichiers pour que les redimensionnements prennent effet !

Exemple : dans ../App/Config/project.autogen.json, la valeur 192x200 de "listItem" correspond à une partie de l’url qui pointe vers le média redimensionné côté serveur (http://kidiliz.c4.fr/Imagestorage/images/192/200/54feacac3e147_hph3c.jpg).

Dans ../Plugins/Themes/Rbs/Base/Assets/less/image-formats.less :

[jQuery][Responsive Design] Exécuter des fonctions en se basant sur les media queries CSS plutôt que sur la largeur de la fenêtre du navigateur

Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width.
Ressources en ligne

Problème: jQuery $(window).width() et les Media Queries CSS3 ne sont pas toujours très en phase.

Lorsqu’on utilise Firefox, IE ou Opéra pour naviguer sur un site responsive, on peut remarquer au redimensionnement en largeur de la fenêtre un léger décalage dans l’exécution d’une media querie par rapport avec un javascript auxquels on a assigné des break-points similaires.

Cet différence provient d’une inconsistence dans la prise en compte de la présence des scroll-barres verticales par les largeurs déclarées pour les media queries.

Ce bug a pour effet qu’une valeur de largeur identique déclarée dans une media query et par jQuery ne s’exécutera pas tout-à-fait au même moment.

Solution: utiliser jQuery pour détecter un changement sur une propriété CSS plutôt que sur la largeur de la fenêtre du navigateur.

Plutôt que de mesurer la largeur d’écran au redimensionnement de la fenêtre, je vérifie si un changement de règle CSS s’est opéré par le biais d’une media query. De cette façon, sans se préoccuper de la manière dont le navigateur prend en charge la largeur de la scroll-barre verticale, le code jQuery et la media query seront exécutés au même moment.

Supposons que la classe « .sampleClass » possède une règle « float: left; » avant la media query et une règle « float: none; » après. Au redimensionnement de la fenêtre, je vérifie un changement de cette règle.

jQuery

Ou (versions les plus récentes de jQuery 1.x) :

CSS

Ressources en ligne

© 2020 devfrontend.info

Theme by Anders NorénUp ↑