Site "Mobile Friendly"

@media all and (max-device-width: 680px) {
/* Vos règles CSS pour les mobiles ici */
#banniere_image {  display: none;  }
nav ul { flex-direction: column;  }
.col_2 {width:calc(100% - 166px)}
}

1 point d'arrêt (iPhone 5s): 320px
Point d'arrêt 2 (iPhone 6+): 414px
3 points d'arrêt (iPad Mini): 703px
4 points d'arrêt (iPad Air): 768px

       Toujours plus:
smartphones règle < 768px
smartphones modernes > 768px à <1024px
ordinateurs > 1024

	* { 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;}
/* masquer les éléments superflus */
	.hide_mobile {	display none !important;}
/* Un message personnalisé */	

body:before {content "Version mobile du site";display block;text-align center;font-style italic;color #777;}
} //fin de @media (max-width: 640px)
La touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage 
(car bugguée sur les périphériques iPhone et iPad).
@media (max-device-width:768px) and (orientation: landscape) {
  html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;  }
}
source Alsa Creation

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
Le "initial-scale=1.0" = prendre en compte le pixel-ratio du media-système. 
mais le "user-scalable=yes" autorise l’utilisateur à zoomer.

/* CSS Normal */
#sidebar {float: right; width: 200px;} // la colone de droite
#main { margin-right: 200px;} // le corps de la page

@media (max-width: 1024px) {/* CSS appliqué aux petits écrans */
   #sidebar {float: none; width: auto; }
   #main { margin-right: 0px; }
}

images de fond
background-image
background-size l’image est placée telle qu’elle on coupe ce qui dépasse
background-size: contain l’image est ajustée pour être entièrement visible.
background-size: cover on agrandit les proportions pour qu’elle recouvre tout,
puis on découpe ce qui dépasse en bas ou à droite.
background-size: 50px 70px (l’image fait 50px par 70px) 
background-size: 100% 100% (l’image fait la taille du bloc,
quitte à perdre ses proportions) :

 Tableau - exemple n lignes m colonnes

Sur un écran de mobile, quand l’affichage normal ne permet plus de placer
toutes les cellules du tableau côte à côte, on linéarise verticalement 
le tableau : ici on cré n tables avec les tr 
et on met les m td de chaque table en colonne
table, tbody { display: block; }
tr { display: table; }
td { display: table-row; }

ligne de texte sans espace trop longue,body { word-wrap: break-word; }
pre { white-space: pre-wrap; } /* pour firefox et les <pre> */

un effet de « :hover » est déclenché avec le tapotement sur l’écran. Si vous avez un menu déroulant, il est possible de dérouler en tapant dessus, tout simplement.
si le menu contient des liens ou des boutons cliquables, le « tapotement »
peut accidentellement se propager sur un lien,appliquer une transition
#nav:hover ul {	transition: 0s linear .05s;}l’apparition différé de 50 millisecondes.

LE HOLLANDAIS VOLANT

---

/* 
 values */
display: block;
display: inline;
display: run-in;

/* 
 values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* 
 plus 
 values */
display: block flow;
display: inline table;
display: flex run-in;

/* 
 values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* 
 values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* 
 values */
display: contents;
display: none;

/* 
 values */
display: inline-block;
display: inline-list-item;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

Valeur initiale	inline
S'applique à	tous les éléments