Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto]Chouette, c'est responsive !
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto]Chouette, c'est responsive !

 Répondre Répondre Page  <1 3031323334 35>
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 5327
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Mai 2016 à 17:50
@Larsene

Sur https://www.w3.org/TR/css3-mediaqueries/ les informations datent de juin 2012, c'est un peu vieux sur l'échelle de péremption internet.  


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
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4790
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mai 2016 à 08:12
Message posté par penspart penspart a écrit:

bon j'ai contourné le probleme en supprimant "vous êtes unique,Prodxyo aussi" à gauche en haut dans le menu, sauf que sur grand écran c'est pas centré Confused

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.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4790
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post 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
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5384
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mai 2016 à 09:01
Message posté par Hobby001 Hobby001 a écrit:

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.


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 LOL)




Edité par Larsene - 03 Mai 2016 à 09:10
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5384
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mai 2016 à 09:18
Message posté par Hobby001 Hobby001 a écrit:


Sur https://www.w3.org/TR/css3-mediaqueries/ les informations datent de juin 2012, c'est un peu vieux sur l'échelle de péremption internet. 


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 Wink)

https://www.w3.org/TR/mediaqueries-4/
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 5327
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mai 2016 à 12:21
Et bien, voilà une foule d'informations à étudier.  

Merci, je vais m'y remettre. Smile


Edité par Hobby001 - 03 Mai 2016 à 12:22
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5384
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mai 2016 à 15:45
Les MQ c'est riche et en constante évolution
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 5327
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mai 2016 à 16:01
Message posté par Larsene Larsene a écrit:


https://www.w3.org/TR/mediaqueries-4/

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
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5384
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post 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 !
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 708
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post 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)
<meta name="viewport" content="width=device-width,initial-scale=1" />
Y a-t-il un rapport entre ces deux "content" ?
Haut de la page
 Répondre Répondre Page  <1 3031323334 35>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne