Afficher un logo selon la résolution d'écran du visiteur
Drahcirid
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour à toutes et à tous.
Le site web "responsive" sur lequel je travaille actuellement possède un logo que je voudrais vouloir afficher à 50 pixels pour les téléphones mobiles et à 150 pixels pour les médias plus grands tels les tablettes et les ordinateurs.
Je n'ai aucune connaissance de ce language, c'est pourquoi je me tourne vers vous qui possédez certainement le(s) solutions qui me manquent.
Merci à l'avance.
Le site web "responsive" sur lequel je travaille actuellement possède un logo que je voudrais vouloir afficher à 50 pixels pour les téléphones mobiles et à 150 pixels pour les médias plus grands tels les tablettes et les ordinateurs.
Je n'ai aucune connaissance de ce language, c'est pourquoi je me tourne vers vous qui possédez certainement le(s) solutions qui me manquent.
Merci à l'avance.
A voir également:
- Afficher un logo selon la résolution d'écran du visiteur
- Double ecran - Guide
- Logo .net - Télécharger - Études & Formations
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Retourner ecran pc - Guide
- Capture d'écran samsung - Guide
1 réponse
Bonjour,
Disposes tu des deux fichiers à utiliser ? (les deux logos dans les tailles voulues ? )
Ensuite... nul besoin de javascript pour ça.
Simplement du CSS pour le responsive..en jouant avec les
Par exemple :
Une autre solution (pas testée) serait un truc du genre
Disposes tu des deux fichiers à utiliser ? (les deux logos dans les tailles voulues ? )
Ensuite... nul besoin de javascript pour ça.
Simplement du CSS pour le responsive..en jouant avec les
@media (max-width:
Par exemple :
#main-img {
height: 150px;
width:100%
}
@media screen and (max-width: 767px) {
#main-img{
background-image: url(logosmall.png);
}
}
@media screen and (min-width: 768px) {
#main-img{
background-image: url(logosmall.png);
}
}
@media (min-width: 992px) {
#main-img{
background-image: url(logobig.png);
}
}
@media (min-width: 1200px) {
#main-img{
background-image: url(logobig.png);
}
}
<div class="container">
<div id="main-img" />
</div>
Une autre solution (pas testée) serait un truc du genre
<picture>
<source media="(min-width: 900px)" srcset="BigImage.png">
<source media="(min-width: 480px)" srcset="MediumImage.png">
<img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia">
</picture>