Discussion :

[Mvu]

Bonjour, j'utilise dans ma feuille de style @media pour la mise en page en fonction de l'écran.
Voici un exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
@media (min-width: 291px) and (max-width: 480px) {
	.interFr { background: url(../images/Inter/B_320x41-iz2017_wood-it-FR.gif); width:320px; height:41px; }
}

Ensuite sur ma page:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="center">
<a class="inter<%=pLang%>" href="http://www.lalibre.be/" ><img src="../images/inter/transparent.png" width="10" height="10" class="inter<%=pLang%>"/></a>
</div>

Fonctionne parfaitement.
Mais est-il possible de lui indiquer un lien <a href...> différent en fonction du @media
Et si oui, fait-on cela dans le Css ou sur la page ?

[Ecared]

Plusieurs solutions d'après moi:

- utiliser javascript

- en css ( avec @media ) créer plusieurs liens, mettre en display: none/block ceux que tu veux afficher ou non suivant la taille de la fenêtre

[Mvu]

Je préfère éviter javascript.
Tu peux me montrer un exemple de crétion de line dans css avec @media ?

[Ecared]

Très rapidement, il faudra ajuster suivant ton cas:

html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="lien1.html" class="mobile">lien 1</a>
<a href="lien2.html" class="tablette">lien 2</a>
<a href="lien3.html" class="deskopt">lien 3</a>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.tablette{display: none;}
.deskopt{display: none;}
 
 @media (min-width: 798px) and (max-width: 1199px){
     .tablette {display:block;}
     .mobile {display:none;}
}
 
 @media (min-width: 1200px){
     .tablette,
     .mobile {display:none;}
     .deskopt{display:block;}
}

[Mvu]

Ok, je pense que c'est bon. Merci.