Forum CMS Made Simple FR
Medias queries actuels - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : Medias queries actuels (/thread-3907.html)


Medias queries actuels - snatch1974 - 22/09/2016

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.4
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~ pas de site particulier pour le moment...
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour à tous,

juste un petit sondage pour savoir quelles sont les médias queries que vous utilisez généralement pour vos sites en adaptative design.

Aujourd'hui il y'a une multitude de terminaux avec une multitude de formats différents (smartphones, tablettes de différentes tailles et définitions, ordi portables, écrans rétinas ou normaux, ordinateurs fixes avec écrans allant de 1280px à 5120px), que ce soit verticalement ou horizontalement donc, je trouve intéressant de savoir où vous faites vos breaks pour avoir des sites le mieux adapté possible aux différents terminaux sans avoir 25 versions css de votre site.

Merci de votre participation

Medias queries actuels - airelibre - 22/09/2016

Hello,

de mon côté, j'utilise Foundation et les breakpoints par défaut fournis avec : http://foundation.zurb.com/sites/docs/media-queries.html

Il m'arrive aussi d'en ajouter un sur les écrans plus larges (au-delà de 1300 par exemple, voire au-delà de 1600).

Medias queries actuels - snatch1974 - 29/09/2016

airelibre a écrit :Hello,

de mon côté, j'utilise Foundation et les breakpoints par défaut fournis avec : http://foundation.zurb.com/sites/docs/media-queries.html

Il m'arrive aussi d'en ajouter un sur les écrans plus larges (au-delà de 1300 par exemple, voire au-delà de 1600).


utilisant bootstrap, j'utilise les breakpoints par défaut en rajoutant les manquants dans dans des cas bien précis aussi comme par exemple lors d'utilisation de texte avec vw comme unité, pour les mobiles (portrait ou vertical), voir même sur le ratio de la fenêtre pour compenser les redimensionnements de fenêtre.

je posais la question aussi car j'ai eu une expérience toute récente avec un site qui s'affichait bien sur ipad mais pas sur une samsung tab, tous 2 de 10,1" pourtant.

Question subsidiaire:

quel est l'avantage que tu trouves à foundation par rapport à bootstrap?

Medias queries actuels - airelibre - 29/09/2016

snatch1974 a écrit :quel est l'avantage que tu trouves à foundation par rapport à bootstrap?

J'ai utilisé Bootstrap3 pendant quelques temps avec une compilation Less, puis je suis passé à Foundation6 d'abord pour essayer / comparer, puis en framework principal pour plusieurs raisons :
Voilà en gros ce qui me vient en tête. Après, ca reste un framework, avec son lot de styles inutiles selon le projet, il faut donc adapter et ne pas hésiter à se passer parfois d'un composant qui serait trop lourd.

Après je n'ai pas testé BS4 qui semble également prometteur.

Medias queries actuels - Virginie 12 - 03/10/2016

Bonjour,

Bootstrap en ce qui me concerne.

Virginie

Medias queries actuels - snatch1974 - 05/10/2016

airelibre a écrit :Après je n'ai pas testé BS4 qui semble également prometteur.


Après avoir jeté un oeil à la v4, il y'a quelques trucs intéressants concernant les média queries comme possibilité de choisir leur sens (design mobile vers desktop ou inversement) et la possibilité de passer en flexbox plutôt qu'en habituelles tables utilisées... ça, ça me plait assez bien !


Virginie 12 a écrit :Bootstrap en ce qui me concerne

les breaks te conviennent bien où es tu obligée d'en rajouter, style pour les smartphones en vertical ou autre?

Medias queries actuels - Virginie 12 - 06/10/2016

Le but, pour moi, est d'obtenir une mise en page acceptable pour un cout raisonnable. J'ai fait le choix de m'installer dans un coin perdu... avec le tissus économique qui va avec (TPE majoritairement). Forcément, c'est différent de la multinationale dont je viens comme manière de concevoir les projets.

Donc je n'ajoute pas de breaks... mais si je devais faire un site avec des utilisateurs un peu plus pointus, je le ferai certainement.

Pas tellement pour les smartphones en vertical (intuitivement, l'utilisateur passe en horizontal dès que c'est plus confortable pour lui), mais pour les (très) grands écrans, où on peut facilement se retrouver avec des lignes trop longues pour un confort de lecture correct.

A+

Medias queries actuels - snatch1974 - 06/10/2016

Virginie 12 a écrit :Pas tellement pour les smartphones en vertical (intuitivement, l'utilisateur passe en horizontal dès que c'est plus confortable pour lui), mais pour les (très) grands écrans, où on peut facilement se retrouver avec des lignes trop longues pour un confort de lecture correct.

Pour ma part, le smartphone est un vrai casse-tête car en vertical on a une largeur qui est presque 2,5 fois plus petite que le dernier break (xs), du moins sur des téléphones comme l'iphone 4, 5 ou tous les autres du même gabarit, et par contre en horizontal, on a une hauteur d'écran insuffisante pour afficher quoi que ce soit d'entier, surtout si les barres de navigation , en haut et en bas font leur apparition... on ne se retrouve avec plus qu'avec moins de 250px de hauteur qui se réduisent encore si on a un menu hamburger fixé en haut; bref, ça devient inutilisable.

C'est qu'on voudrait que tout le monde ait des telephones de la taille d'une tablette... sauf nous car ça rentre plus dans la poche! :lol:

Medias queries actuels - airelibre - 07/10/2016

Avec Foundation6, il existe des règles préétablies pour les orientations - exemple en SASS :
Code :
@include breakpoint(landscape){
   .element{
      width: 50%;
   }
}

Pour en savoir plus sur la compilation Sass ou Less sur CMS Made Simple, je donne une petite conférence au Geekmoot : http://www.geekmoot.com Wink

Medias queries actuels - snatch1974 - 07/10/2016

airelibre a écrit :Avec Foundation6, il existe des règles préétablies pour les orientations - exemple en SASS :
Code :
@include breakpoint(landscape){
   .element{
      width: 50%;
   }
}

Pour en savoir plus sur la compilation Sass ou Less sur CMS Made Simple, je donne une petite conférence au Geekmoot : http://www.geekmoot.com Wink


Entre le 19 et le 21 octobre, je serais en train de préparer mon sac pour partir mon annuel mois au Royaume de Siam :lol:
Je me défait de ma Less pour mon Sass de décompression !!! Cool

Medias queries actuels - airelibre - 07/10/2016

Tu peux bien faire un petit détour par Leicester non ? Wink

Medias queries actuels - snatch1974 - 07/10/2016

ben justement j'hésitais entre passer mes vacances annuelles dans le brouillard et sous la pluie ou sur une plage ensoleillée de sable blanc... tu me tentes... :lol:

Medias queries actuels - airelibre - 07/10/2016

La plage, le sable, tout ça c'est surfait, en plus ca rentre dans les chaussures. En Angleterre tu n'aurais pas ce problème Smile

Bon, on va peut être revenir au sujet initial Wink

Medias queries actuels - snatch1974 - 07/10/2016

je vis en tongs toute l'année! :p

Pour revenir au sujet, quel intérêt de réduire le width de 50% en position landscape, c'est en portait que ça serait intéressant, non?

Medias queries actuels - airelibre - 07/10/2016

snatch1974 a écrit :Pour revenir au sujet, quel intérêt de réduire le width de 50% en position landscape, c'est en portait que ça serait intéressant, non?

C'était un exemple non réaliste pour montrer le mixin "breakpoint" de Foundation Wink