Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #m
  • #me
  • #med
  • #media
RSS: #media-queries

#media-queries

  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 31/08/2016
    5
    @baroug
    @spip
    @tofulm
    @cy_altern
    @b_b
    5

    Comment travailler avec des icônes en SVG
    ▻https://la-cascade.io/comment-travailler-avec-des-icones-en-svg

    https://la-cascade.io/content/images/2016/04/styled-icons.jpg

    Remarque : quand vous exportez un SVG depuis un outil de design, il comprendra souvent du markup et des métadonnées inutiles, ainsi que des données excessivement précises pour le chemin (dans l’attribut d). Essayez l’outil SVGOMG and comparez le code avant et après pour voir ce qui est supprimé ou simplifié.

    #web_design

    Agnès Maillard @monolecte CC BY-NC-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 31/08/2016

      (cet article est une traduction de ►http://fvsch.com/code/svg-icons/how-to)

      Tout le nécessaire pour utiliser des SVG dans un site web, y compris :
      - les méthode pour gérer l’accessibilité,
      – la gestion des « vieux » navigateurs
      – les astuces d’utilisation de CSS (pour modifs de taille et couleur par ex)
      – des exemples d’utilisations des attributs fill et stroke
      – les contournements des bogues connus des navigateurs

      + URL de SVGOMG (outil d’optimisation des fichiers SVG) : ▻https://jakearchibald.github.io/svgomg

      Voir aussi ▻https://useiconic.com pour un ensemble d’icones SVG et outils/méthodes associés

      Pour aller plus loin (et en particulier les animations, les 6 méthodes pour intégrer un SVG dans une page HTML, les bidouilles pour les rendre responsifs, les media-queries...)
      voir : ▻https://la-cascade.io/svg-style-et-anime-avec-css

      les librairies :
      – SnapSVG : « The JavaScript SVG library for the modern web. » (ou « Snap.svg est à SVG ce que jQuery est à HTML, et il rend la vie avec SVG plus facile. ») : ►http://snapsvg.io
      – Raphaël : « Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web » : ►http://dmitrybaranovskiy.github.io/raphael

      et la compilation de références : ▻https://la-cascade.io/ressources/#svg

      #icone #méthode #svg #web_design #SPIP #HTML5 #iconic #svgomg #outil #animation #raphaël #snapsvg #librairie #javascript #media-queries

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @neosting
    NeoSting @neosting CC BY 13/11/2013

    Comment créer un thème compatible mobiles avec les media-queries ?
    ▻http://neosting.net/media-queries-creer-theme-compatible-mobiles

    Maintenant que j’ai expérimenté la technique, et que je vous propose enfin un blog compatible mobiles, je vais pouvoir vous donner quelques explications plus détaillées sur la méthode que j’ai utilisée. Rendre son thème compatible avec les mobiles n’est pas si compliqué, mais ça demande du temps et de l’organisation dès le départ. Tout se […] #css #media-queries

    NeoSting @neosting CC BY
    • @fil
      Fil @fil 13/11/2013

      #mobile #responsive

      Fil @fil
    Écrire un commentaire

  • @fil
    Fil @fil 24/03/2013
    7
    @rastapopoulos
    @robin
    @robin
    @robin
    @mukt
    7

    Comment distinguer les écrans « grand », « petit » et « moyen » en #CSS ? Bah, c’est pas facile, mais voilà une astuce…
    Responsive Web Design With Physical Units | Smashing #Mobile
    ▻http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units

    Here’s the theory: In a combined query, if the ratio between the smaller of the width and height and the resolution, called a PSINET score, is higher than 5, then the result falls in the category of a physically large device. If the resulting number is lower than 5, then it is a physically small device. Devices that score very close to 5 are considered to be medium-sized.

    #media-queries

    • #@media
    Fil @fil
    Écrire un commentaire

  • @seenthis
    Seenthis @seenthis CC BY-SA 16/10/2012
    2
    @ben
    @sammyfisherjr
    2

    La grosse nouveauté sur #Seenthis : c’est recodé en #html5, et surtout c’est en #media-queries, c’est-à-dire que le site Web s’adapte à la taille de l’écran.

    Bon, c’est pas terminé, mais j’ai essayé de faire le maximum dans la journée. Théoriquement, ça devrait se déployer au fur et à mesure, et vous pouvez donc tester sur votre iDroidPhone préféré pour voir.

    • #Google
    Seenthis @seenthis CC BY-SA
    • @thibnton
      tbn @thibnton PUBLIC DOMAIN 16/10/2012

      ah ouais !

      tbn @thibnton PUBLIC DOMAIN
    • @mariasfat
      mariasfat @mariasfat CC BY-NC 16/10/2012
      @seenthis

      Testé sur mobile, c’est nickel !

      Beau travail @seenthis, vous avez bien mérité vingt minutes de sommeil.

      mariasfat @mariasfat CC BY-NC
    • @olivier_sc
      Olivier-SC @olivier_sc 16/10/2012

      Quel travail ; bravo et merci !

      Olivier-SC @olivier_sc
    • @ben
      Ben @ben CC BY-NC 16/10/2012

      ah #seenthisbug : auteurs / me suggérer des contacts

      Ben @ben CC BY-NC
    • @0gust1
      0gust1 @0gust1 CC BY-NC 16/10/2012

      +1000, #seenthis_ça_roxxe
      J’attends un petit peu que la peinture sèche avant de remonter (d’éventuels et légers) soucis :)

      0gust1 @0gust1 CC BY-NC
    • @klaus
      klaus++ @klaus 17/10/2012

      Sous Android 4.1 avec le brouteur standard la barre de recherche/login saute, cad elle se met bien en bas de l’écran mais quand on fait bouger le contenu vers le haut, la barre bouge avec avant de se remettre à sa place en bas de l’écran. Même chose quand on pousse la page vers le bas, mais là c’est moins gênant.

      klaus++ @klaus
    • @klaus
      klaus++ @klaus 17/10/2012

      Ah oui, mon dernier « billet » est hyper-chiant, car il est tellement long et ennuyeux, on peut « scroller » pendant des minutest avant d’arriver à sa fin. Une fonction pour plier/déplier des messages longs serait la bienvenue.

      klaus++ @klaus
    • @klaus
      klaus++ @klaus 17/10/2012

      Par contre c’est super la navigation en bas de l’écran une fois qu’on est connecté. Chapeau !

      klaus++ @klaus
    • @klaus
      klaus++ @klaus 17/10/2012

      Sous Google Chrome pour Android le problème avec la barre de recherche/login sautillante ne se produit pas.

      klaus++ @klaus
    • @klaus
      klaus++ @klaus 17/10/2012

      Je continue avec mon Google Nexus S /Android 4.1 :
      Und fois connectė une surface grise se glisse par des su l’ėcran quand on scrolle. Elle saure vers le bas pour faire Palace au comtenu et à als Barre de navigatio (Google Chrome).
      Ecrire des commentaires marche trres bien - si seulement Chrome n’essayait pas de corriger mes « Fa Utes » pour en rajouter d’énormes erreurs.

      klaus++ @klaus
    • @klaus
      klaus++ @klaus 17/10/2012

      Encore sous Android, cette fois avec Firefox mobile c’est encore mieux. Quand on est connecté c’est quasiment parfait, on peut scroller à n’importe quelle vitesse, pas de surface grise ou noire provoquée par le trop rapide mouvement. Quand on n’est pas connecté par contre l’effet est présent sous une forme légèrement différente que dans Chrome et le brouteur Android.

      Zut, mon Firefox sous Android vient de crasher, il n’y a même pas de capture d’écran dans le menu Android des derniers apps utilisées comme il y a d’habitude.

      Avant je venais de remarquer qu’on peut se connecter mais que le dialogue est pénible à remplir sous tous les brouteurs car il disparait sous le clavier virtuel.

      Bonne nuit et félicitations pour cette beta impressionnante. C’est pleinement utilisable !

      klaus++ @klaus
    • @monolecte
      Agnès Maillard @monolecte CC BY-NC-SA 17/10/2012

      Sous Android, je ne peux pas me connecter. Le pop up de connexion entre en conflit avec le clavier virtuel quand je veux taper le mot de passe.

      Agnès Maillard @monolecte CC BY-NC-SA
    • @ben
      Ben @ben CC BY-NC 17/10/2012

      Sous itrucmachinmininanopad c est tout simplement extra !

      Ben @ben CC BY-NC
    • @seenthis
      Seenthis @seenthis CC BY-SA 17/10/2012

      Je pense faire une page séparée de connexion, parce que de toute façon ça pose beaucoup de difficultés :
      – code pourri pour gérer les erreurs en Ajax (pas dément),
      – dépliage qui semble déconner (même sur PC) sur certains brouteurs,
      – confusion ergonomique avec l’inscription,
      – espace drôlement rikiki.

      Seenthis @seenthis CC BY-SA
    • @klaus
      klaus++ @klaus 17/10/2012
      @monolecte

      @monolecte Tu peux te connecter sous Android en faisant glisser le dialogue de connexion vers le haut pour le faire réapparaître.

      klaus++ @klaus
    • @thibnton
      tbn @thibnton PUBLIC DOMAIN 17/10/2012

      si je perçois bien les choses, ça veut dire qu’on a plus la possibilité quand on dézoome une page de rétrécir la police en même temps ?

      tbn @thibnton PUBLIC DOMAIN
    • @seenthis
      Seenthis @seenthis CC BY-SA 17/10/2012

      Si vous forcez le rechargement des CSS, il y a une foule de petits détails qui ont été changés. Notamment à destination des très petits écrans (éviter les colonnes de texte trop étroites).

      Seenthis @seenthis CC BY-SA
    • @monolecte
      Agnès Maillard @monolecte CC BY-NC-SA 17/10/2012

      Ben oui, mais j’ai un gros nécran avec une colonne perdue au milieu !

      Agnès Maillard @monolecte CC BY-NC-SA
    • @bohwaz
      bohwaz @bohwaz ART LIBRE 18/10/2012

      Ça a l’air mieux qu’avant sur Nokia S40 et Opera Mini en tt cas, merci !

      bohwaz @bohwaz ART LIBRE
    • @fil
      Fil @fil 18/10/2012

      iPad : excellent affichage en mode vertical ; mais le clic sur l’étoile reste délicat

      Fil @fil
    • @fil
      Fil @fil 18/10/2012

      iPad : difficile aussi de trouver le bouton « modifier » sur les messages ; le shift-return n’est pas pris en compte (j’ai un clavier externe)

      Fil @fil
    • @seenthis
      Seenthis @seenthis CC BY-SA 18/10/2012
      @fil

      @fil : oui, ça c’est pas du tout traité : virer un certain nombre de trucs masqués qui apparaissent au survol, vu que c’est assez bloquant en interface tactile.

      Seenthis @seenthis CC BY-SA
    • @booz
      BoOz @booz 29/07/2013

      Pour ceux qui s’y interessent j’ai trouvé ces points de cassure là dans les css de Seenthis

      / Media queries - points de cassure Seenthis /

      / Moins large que 1000px (devices et navigateurs) /
      @media all and (max-width : 1000px){

      }

      @media all and (max-width : 900px){

      }

      @media all and (min-width : 780px) and (max-width : 1000px){
      }

      @media all and (max-width : 680px){

      }

      @media all and (max-width : 500px){

      }

      / Mobile portraits et paysages /
      @media all and (max-width : 400px){

      }

      BoOz @booz
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 3/10/2012
    5
    @baroug
    @0gust1
    @fil
    @rastapopoulos
    @mukt
    5

    Using media queries from code | Document Object Model (DOM) | MDN
    ▻https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code?redirectlocale=en-US&redirectslug=C

    Jouer avec les media queries depuis un script, par exemple :

    var mq = window.matchMedia("(max-width: 640px)");
    if (!mq.matches)
            alert('prout');

    The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the MediaQueryList interface and its methods and properties. Once you’ve created a MediaQueryList object, you can check the result of the query or, alternatively, receive notifications automatically when the result changes.

    #css #media-queries #javascript #jquery

    b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 4/10/2012

      Et comme d’habitude il faut un fix pour IE, le voici :

      ►https://github.com/paulirish/matchMedia.js

      b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 10/12/2015

      Une fourberie pour faire la même chose à coup de css + jQuery :

      Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.

      ▻https://www.fourfront.us/blog/jquery-window-width-and-media-queries

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @arno
    ARNO* @arno ART LIBRE 17/01/2012
    1
    @nhoizey
    1

    #media-queries sur le navigateur internet de la #Freebox : les queries fonctionnent, mais en tant que support, ça s’identifie comme :
    @media screen
    et non en tant que :
    @media tv

    Je ne peux donc pas cibler l’écran de la télévision avec les #media-queries : alors que c’est certes un grand écran, mais consulté à une distance de plusieurs mètres avec une télécommande pas bien précise. Merde. (Et, très important : bande de cons !)

    ARNO* @arno ART LIBRE
    Écrire un commentaire

  • @fil
    Fil @fil 17/01/2012

    A Pixel Identity Crisis
    ►http://www.alistapart.com/articles/a-pixel-identity-crisis

    #css #media-queries et tablettes à résolution variable

    Fil @fil
    • @arno
      ARNO* @arno ART LIBRE 17/01/2012

      Intéressant.

      Truc à prendre en compte aussi désormais : la télé est désormais un écran d’excellente qualité, de définition 1920x1080, mais qu’on regarde depuis une distance de plusieurs mètres. Va falloir penser aux bons media-queries là aussi.

      ARNO* @arno ART LIBRE
    • @baroug
      baroug @baroug 17/01/2012

      D’excellente qualité… pas forcément.

      baroug @baroug
    Écrire un commentaire

  • @booz
    BoOz @booz 19/11/2011
    1
    @julien
    1

    Responsive Web Design: 50 Examples and Best Practices - DesignModo
    ►http://designmodo.com/responsive-design-examples

    Exemples de gabarits réactifs, featuring Alsacreation et Boston globe, bravo à eux.

    #css #media-queries #gabarits-reactifs

    BoOz @booz
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 11/11/2011
    1
    @fil
    1
    @booz

    Amazium - The responsive web framework..!
    ►http://www.amazium.co.uk/#forms-tables

    @Booz encore un truc de responsive webdesign basé sur 960grid (vu que ce terme semble à la mode...)

    #css #media-queries #grille

    b_b @b_b PUBLIC DOMAIN
    • @booz
      BoOz @booz 19/11/2011
      @baroug

      ah oui super, ca peut intéresser @baroug même si lui c pas la grid 12 mais la 16 qu’il utilise.

      BoOz @booz
    Écrire un commentaire

  • @booz
    BoOz @booz 31/10/2011

    Media Queries for Standard Devices | CSS-Tricks
    ►http://css-tricks.com/snippets/css/media-queries-for-standard-devices

    #media-queries

    BoOz @booz
    Écrire un commentaire

  • @booz
    BoOz @booz 31/10/2011

    Une feuille de styles de base pour le Web mobile - Alsacreations
    ►http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html

    #media-queries

    BoOz @booz
    • @0gust1
      0gust1 @0gust1 CC BY-NC 1/11/2011
      @booz

      Salut @BoOz,
      Tu as aussi ►http://html5boilerplate.com/mobile , très complet, à expurger selon les besoins.

      #css #mobile

      0gust1 @0gust1 CC BY-NC
    Écrire un commentaire

  • @booz
    BoOz @booz 26/10/2011
    1
    @fil
    1

    320 and up
    ►http://stuffandnonsense.co.uk/projects/320andup

    #media-queries

    BoOz @booz
    Écrire un commentaire

  • @booz
    BoOz @booz 26/10/2011

    Foundation: Rapid Prototyping and Building Framework from ZURB
    ►http://foundation.zurb.com

    #media-queries

    BoOz @booz
    Écrire un commentaire

  • @booz
    BoOz @booz 26/10/2011

    The Boston Globe
    ►http://bostonglobe.com

    Média query inside

    #media-queries

    BoOz @booz
    Écrire un commentaire

  • @notabene
    Stéphane Deschamps @notabene CC BY-NC-SA 21/09/2011

    Boston Globe’s Responsive Redesign. Discuss. – Jeffrey Zeldman Presents The Daily Report
    ►http://www.zeldman.com/2011/09/15/boston-globes-responsive-redesign-discuss

    #Responsive #design is not #CSS3 media queries, any more than “Hamlet” can be reduced to English grammar. (Yet without English grammar, there is no Hamlet.)

    Citation mémorable, à graver dans le marbre.
    #media-queries

    Stéphane Deschamps @notabene CC BY-NC-SA
    Écrire un commentaire

  • @fil
    Fil @fil 4/05/2011
    4
    @baroug
    @izo
    @rastapopoulos
    @mukt
    4

    #css #media-queries de base via @karlpro
    ►http://www.la-grange.net/2011/05/04/how-wide
    ►http://www.alsacreations.com/xmedia/tuto/exemples/mediaqueries

    Fil @fil
    Écrire un commentaire

  • @0gust1
    0gust1 @0gust1 CC BY-NC 26/05/2010

    Media Queries
    ►http://www.w3.org/TR/css3-mediaqueries

    W3C Candidate Recommendation 15 September 2009

    #device #mediaquery #media-queries #recommendation #w3c #webdesign #webdevelopment #webdev #webstandards #reference #css3 #design #browser #mediaqueries #specification #standards

    0gust1 @0gust1 CC BY-NC
    Écrire un commentaire

Thèmes liés

  • #css
  • company: boston globe
  • #design
  • #css3
  • industryterm: media-queries
  • #responsive
  • industryterm: media queries
  • city: hamlet
  • person: jeffrey zeldman
  • #mediaquery
  • #recommendation
  • #w3c
  • #webdesign
  • #web_design
  • #webdevelopment
  • #webstandards
  • #reference
  • #browser
  • #mediaqueries
  • #specification
  • #standards
  • industryterm: device mediaquery media-queries recommendation
  • person: recommendation
  • industryterm: mediaquery media-queries recommendation w3c webdesign webdevelopment webdev webstandards
  • position: candidate
  • #mobile
  • #webdev
  • #device
  • publishedmedium: boston globe
  • #seenthis
  • #grille
  • industryterm: media-queries gabarits-reactifs
  • industryterm: web design
  • #gabarits-reactifs
  • #freebox
  • facility: building framework
  • #html5
  • #javascript