81 lines
1.8 KiB
CSS
81 lines
1.8 KiB
CSS
|
/*******************************/
|
||
|
|
/*Écrans smartphone&netbook, moins de 768px */
|
||
|
|
@media only screen and (max-width: 768px) {
|
||
|
|
|
||
|
|
/* Copie de http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
|
||
|
|
But : avoir un truc presque responsive avec tous les cms, mais ça va sans doute faire des crasses, en vrai.
|
||
|
|
*/
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: auto;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
|
||
|
|
img,
|
||
|
|
table,
|
||
|
|
td,
|
||
|
|
blockquote,
|
||
|
|
code,
|
||
|
|
pre,
|
||
|
|
textarea,
|
||
|
|
input,
|
||
|
|
iframe,
|
||
|
|
object,
|
||
|
|
embed,
|
||
|
|
video {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* conserver le ratio des images */
|
||
|
|
img {
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* gestion des mots longs */
|
||
|
|
textarea,
|
||
|
|
table,
|
||
|
|
td,
|
||
|
|
th,
|
||
|
|
code,
|
||
|
|
pre,
|
||
|
|
samp {
|
||
|
|
-webkit-hyphens: auto; /* césure propre */
|
||
|
|
-moz-hyphens: auto;
|
||
|
|
hyphens: auto;
|
||
|
|
word-wrap: break-word; /* passage à la ligne forcé */
|
||
|
|
}
|
||
|
|
code,
|
||
|
|
pre,
|
||
|
|
samp {
|
||
|
|
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
|
||
|
|
|
||
|
|
.element1,
|
||
|
|
.element2 {
|
||
|
|
float: none;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*******************************/
|
||
|
|
/*Fermeture de la balise "smartphone&netbook" */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*******************************/
|
||
|
|
/*Écrans smartphone en landscape, corrige un bug lié à la police */
|
||
|
|
@media (max-device-width:768px) and (orientation: landscape) {
|
||
|
|
html {
|
||
|
|
-webkit-text-size-adjust: 100%;
|
||
|
|
-ms-text-size-adjust: 100%;
|
||
|
|
}
|
||
|
|
}
|