Responsive Images (Adapter une bannière d'un site web)
TheFlameflo Le 31 janvier 2017 à 21:57
body {background:url("ton background") no-repeat top center;}
@media (min-width: 768px)
{ body
{
background-size: 100%
}
}
Profil introuvable Le 31 janvier 2017 à 23:33 (Édité le 31 janvier 2017 à 23:35)
Aucun copyright !Merci beaucoup 'TheOldNoob' !!! 😀
Si je peu aidé, c'est avec plaisir 😀
Bon, j'ai testé de mon côté et voilà : il suffit d'enlever la mention "not handheld" et ça marche, donc ceci est fonctionnel :Merci beaucoup 'TheFlameflo' ça faisait longtemps que je n'avait pas trouver de solution à ce problème et je me rend compte que c'était un code tout simple...
Ça devrait fonctionner étant donné que si un écran est plus petit que 768px, c'est logiquement un mobile ! ^^body {background:url("ton background") no-repeat top center;} @media (min-width: 768px) { body { background-size: 100% } }
Il va falloir que je continue mon étude sur le Responsive Design parce que la franchement j'ai honte 😶
MERCI BEAUCOUP : 'TheFlameflo', 'TheOldNoob', 'jeannot_gates' 😉
Je met donc ce topic en résolu, par contre si quelqu'un peut me prendre en charge sur l'autre topic, cela m'aiderai beaucoup aussi car il faut bien que je le résoud à un moment donné... 😉
Par contre j'aurais besoin d'un développement sur la fonction "not-handheld" car j'aimerais savoir si elle me sera utile dans mes prochains sites à programmer...
Pour m'avoir aidé, je suis à votre service pour vous aidez dans vos projets, programmation ou autres ou pourquoi pas un PC plus rapide (assistance par TeamViewer) ? 😉
TheFlameflo Le 1 février 2017 à 01:54
Concernant not handheld, ça exécute le code si l'appareil du visiteur N'EST PAS un mobile.
Tu peux le faire avec d'autres types d'appareils (tv, imprimante, etc).
Cependant, en général, on fait une condition pour un appareil en particulier, comme un affichage différent sous mobile, télévision, etc.
Pour comparer à du PHP par exemple, c'est comme ajouter "!" devant une condition, ça signifie le contraire, sauf qu'en CSS, c'est "not".
Profil introuvable Le 1 février 2017 à 02:34
Merci beaucoup, cela me sera surement utile ! 😉
Autre chose, je voudrais savoir quel est la résolution d'écran de 2017, est-ce que c'est toujours 1366x768 ou c'est largement dépassé ? (je parle de la résolution des écrans que les gens achète)
Merci d'avance 😉
TheFlameflo Le 1 février 2017 à 03:53
http://fr.screenresolution.org/
Profil introuvable Le 2 février 2017 à 02:43
Oui je le connais ce site, et j'ai vu cela aussi... Donc je suis inquiet car si mon site dépasse 1366 pixels de largeur, la bannière augmentera sa taille et remplira le contenu du site... 😰
Est-ce que je laisse mon site adapter jusqu’à 1366 pixels ? Est-ce que j'affiche un message lorsque cela dépasse les 1366 pixels pour dire aux visiteurs de réduire la taille de leur fenêtre ?
J'attends vos avis 😀
Profil introuvable Le 6 février 2017 à 22:56 (Édité le 7 février 2017 à 23:36)
Finalement je me suis décidé 😉
Est-ce que j'affiche un message lorsque cela dépasse les 1366 pixels pour dire aux visiteurs de réduire la taille de leur fenêtre ?Oui je me suis décidé à intégrer cette fonction dans mon code, car je ne vais pas m'amuser a tester toutes les résolutions des futur écrans. L'utilisateur se débrouillera hein...
Voici le code :
<script>
if( screen.width >= 1388 ){
message = 'Bonjour visiteur et bienvenue sur "PFX". Pour obtenir une meilleur expérience de navigation sur notre site, veuillez réduire la taille de la fenêtre de votre navigateur en dessous de 1388 pixels. Nous nous excusons pour la gêne occasionnée.';}
alert(message);
</script>
Donc je suis inquiet car si mon site dépasse 1366 pixels de largeur, la bannière augmentera sa taille et remplira le contenu du site...J'avais penser à cela et je pense intégrer une fonction plus tard, c'est-à-dire quand la bannière augmentera, elle poussera le contenu 😉
Merci à tous de m'avoir aidé ! 😉
