[Tuto]Chouette, c'est responsive ! |
Répondre | Page <1 3031323334 35> |
Auteur |
Sujet Recherche Options des sujets
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6513 |
Envoyé : 02 Mai 2016 à 17:50 |
@Larsene Pour sa part https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ date d'octobre 2010. Si un essai avec mydevice.io me retourne 320px de large pour mon smart phone, $(window).width(); me retourne 980 pixels. C'est aussi vrai pour mon iPad mini qui passe de 768px à 980px. C'est pourquoi, j'ai décidé d'utiliser 990px comme référence. Ça désavantage le menu sur la tablette mais ça offre une garantie que le hamburger s'affichera sur le smartphone (pour l'instant). Edité par Hobby001 - 02 Mai 2016 à 20:29 |
|
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Envoyé : 03 Mai 2016 à 08:12 |
J'ai eu aussi un soucis de menus avec ce tuto (beaucoup plus de déléments), Larsène avait corrigé ça, je vais essayer de retrouver ce qu'il avait modifié par rapport au tuto. Sinon, je ne vois pas l'utilité d'ecrire "présentation de Prod'Xyo" , on se doute bien que ce n'est pas ta famille que tu vas présenter! Pour moi un menu doit être concis. D'autre part, je ne pense pas qu'une page d'accueil toute vide avec un logo soit bonne pour le référencement, elle ne sert à rien (aucune info sauf le slogan) et oblige à un clic de plus. |
|
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Envoyé : 03 Mai 2016 à 08:18 |
Voici le code du menu pour www.de-troyer.be :
.barremenu{ background-color:rgba(153,0,204,0.8) !important; width:100% !important; position : fixed !important; z-index:9999 !important; } @media screen and (max-width: 799px) { .titrebarremenu{ font-size:20px !important } #WEBoutonMenu{ display:inline-block !important; } #WEMenuPrincipal{ display:none !important; } } @media screen and (min-width: 799px) and (max-width: 1170px) { .titrebarremenu{ font-size:24px !important; } .menu{ margin-left:2px !important; } #WEBoutonMenu{ display:none !important; } #WEMenuPrincipal{ display:inline-block !important; } } @media screen and (min-width: 1170px) { .titrebarremenu{ font-size:32px !important; } .menu{ margin-left:5% !important; } #WEBoutonMenu{ display:none !important; } #WEMenuPrincipal{ display:inline-block !important; } } Calque Menu: Sélectionner le panneau d'éléments contenant les menus propriétés-->redimensionnement : hauteur seul. , dépassement : visible, mode affichage relative styles -->personnalisation-->largeur auto !important Edité par Bridet - 03 Mai 2016 à 08:28 |
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Envoyé : 03 Mai 2016 à 09:01 |
Parce qu'il ne faut pas confondre le width avec device-width. Le premier peut varier sur un même appareil selon le navigateur utilisé.... http://screensiz.es/phone Si l'on souhaite viser un périphérique mobile plutôt qu'une résolution d'écran, il est plus judicieux d'utiliser le max-device-width. Précision (du 16/03/2016 ) Edité par Larsene - 03 Mai 2016 à 09:10 |
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Envoyé : 03 Mai 2016 à 09:18 |
mea culpa, le travail du W3C est en constante évolution, et si le document cité est normatif, le dernier concernant les MQ est encore un working draft (du 21/01/2016, c'est vieux, mais quand même ) https://www.w3.org/TR/mediaqueries-4/ |
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6513 |
Envoyé : 03 Mai 2016 à 12:21 |
Et bien, voilà une foule d'informations à étudier.
Merci, je vais m'y remettre.
Edité par Hobby001 - 03 Mai 2016 à 12:22 |
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Envoyé : 03 Mai 2016 à 15:45 |
Les MQ c'est riche et en constante évolution
|
|
Hobby001
Admin Group Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6513 |
Envoyé : 03 Mai 2016 à 16:01 |
2.3 "handheld" is deprecated media type 11. "device-width" and "device-hight" are deprecated media feature. Authors must not use them. Pourtant cette détection a de la valeur.
Edité par Hobby001 - 03 Mai 2016 à 16:01 |
|
Larsene
Admin Group Depuis le: 05 Mar 2012 Pays: France Status: Inactif Points: 5388 |
Envoyé : 03 Mai 2016 à 16:14 |
Bien vu ! The
device-* media features are also sometimes used as a proxy to detect
mobile devices. Instead, authors should use media features that better
represent the aspect of the device that they are attempting to style against.
Je vais m'y pencher, pour mon prochain tutoriel ! |
|
jjb1
Senior Member Depuis le: 27 Feb 2013 Pays: France Status: Inactif Points: 848 |
Envoyé : 02 Juin 2016 à 12:39 |
Bonjour Larsene,
Désolé, mais je vais faire descendre le niveau d'un (au moins) cran. J'envisage de me lancer dans du vrai responsive, mais je n'ai pas encore franchi le pas. En consultant, pour la énième fois, le tuto, je note que dans la page, un des élément à pour classe perso "content". En regardant les codes, je lis : 3- code HTML / header (sur page ou calque, peu importe)
Y a-t-il un rapport entre ces deux "content" ?
|
|
Répondre | Page <1 3031323334 35> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |