Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Le responsive design

Ce cours est payant

S'inscrire

Présentation

Mis à jour le

Le responsive design est arrivé dans les techniques de développement web avec l'apparition des supports mobiles. Avant l'avènement des smartphones et autres tablettes, les seuls devices (périphériques) permettant de naviguer sur le web étaient des écrans d'ordinateurs classiques, donc ayant des résolutions assez normalisées (ex : 1024*768, 1280*900,…

~~ Fin de l'extrait ~~

Viewport

Mis à jour le

Pour faire du responsive design, il faut commencer par paramétrer le viewport. En gros le viewport est la surface émulé par votre navigateur selon différents paramètres. Il n'est pas spécialement nécessaire de configurer le viewport en développement "desktop".

En revanche dès qu'on passe sur des supports mobiles…

~~ Fin de l'extrait ~~

Media queries

Mis à jour le

Les média queries sont des sorte de blocs d'instructions, qui vont vous permettre de redéfinir vos propriétés selon différents paramètres. Il y a pas mal de possibilités avec les media queries, mais nous aborderons ce sujet simplement, avec un device "screen", et des seuils de résolutions en pixels.

Voici un exemple…

~~ Fin de l'extrait ~~

Astuce

Mis à jour le

Vous pouvez optimiser grandement  les performances de votre site grâce aux media queries. Par exemple vous pouvez enlever les grosses images qui pèsent lourd sur votre version desktop pour avoir un site allégé, et donc plus rapide à charger par un smartphone en 2G/3G/...

Exemple :

div.banner-img {
background-image: url(../img/logiciel.jpg);
}
@media only screen and (max-width:…
~~ Fin de l'extrait ~~