CSS3

Ah là là… l’optimisation mobile… que c’est compliqué !

En plus on peux pas tester avec tous les navigateurs, c’est compliqué. J’ai créé (avec l’aide d’autres sites) une feuille de style de base (body, html…) pour l’adaptation mobile. Donc, il faut utiliser les @media queries, qui sont assez délicates à manier !

Feuille de style de base pour mobile

Je répète, cette feuille de style adapte votre site à tous les appareils mobiles et autres.

Voici la feuille de style :

*{

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

body {

width: auto;
margin: 0;
padding: 0;

}

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {

max-width: 100%;

}

img {

height: auto;

}

textarea,
table,
td,
th,
code,
pre,
samp {

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;

}

code,
pre,
samp {

white-space: pre-wrap;

}

colonne1, colonne2 {

float: none;
width: auto;

}
@media (max-device-width:768px) and (orientation: landscape) {

html {

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;

}

}

Il ne vous reste plus qu’à l’intégrer dans votre site !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *