Bonjour. visiteurs jour : 32       Au président     Beauté santé     Infos loisirs     Ensemble      Jean      Informatique     Einstein     Santé corona

Les joies de l'informatique et de l'internet !





Coucou et merci


  Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels  - Programation - Sites RJ - Vidéo - Plan du site -



   

si l'utilisateur réduit sa fenêtre, le Div se réduit de même. Il apparaîtrait un ascenseur pour voir la totalité tu texte

mettre des blocs en position: absolute en définissant une position haute et basse par rapport aux limites de leur bloc parent.
Exemple :
<!doctype html><html><head>
<style type="text/css">
body > div {
	background-color: #eee;
	width: 900px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
}
body > div > div {
	background-color: #ddd;
	width: 445px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
}
</style></head><body>
<div><div></div></div>...
C'est parfaitement fluide. On peut évidemment faire la même chose en largeur.
Ça marche aussi avec position: relative au lieu de position: absolute.

Responsive Web Design

"Mobile Friendly" Le désign du site doit être souple et s'adapter aux tailles d'écran avezc des zones tactiles suffisamment espacées.

Les points de rupture pour un affichage « normal » de 960px de largeur: 

Jusqu’à 479px : smartphone en portrait 

De 480px à 959px : smartphone, petite tablette en paysage, tablette en portrait
De 960px à 1280px : tablette en paysage,
1281px et au delà : grand écran.

Si  votre design initial est basé sur une largeur de 1024px,  remplacer le point de rupture 960px par 1024px.


Passer en HTML 5

<!DOCTYPE html>
<html lang="fr">
<meta  charset="iso-8859-1"/>

Laisser tomber la balise meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1"> 

ou (?)
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> 


Laisser tomber la balise meta viewport et passer au css (>2012)

@viewport {
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}

"Comprendre le Viewport dans le Web mobile".
le min-with n'est pas utile ???

Utiliser un width relatif plutôt que fixe : mieux que width=200px pour une largeur totale de 1000px
De même pour les images
width de 100% : img{ width : 100% ;}
width de 100%, max-width à la taille du fichier : img{ max-width : 100% ;}

Fluide, mais pas moins large que 768 et pas plus grand que 1024 :
Min-width: 768px ;
Max-width: 1024px ;

Au moins 350 de haut:
Min-height: 350px;

#main pas moins large que 1000 sur un ordinateur:
@media screen and (min-width: 1024px){
#main{min-width 1000px}
}
   

orientation=portrait	Règles appliquées à tout navigateur si hauteur >= largeur.

orientation=landscape	Règles appliquées à tout navigateur si largeur  supérieure à la hauteur.
@media (min-width: 468px)(max-width: 767px) {
  /*   code css  le min-with n'est pas utile ???  */
}
@media (min-width: 768px)(max-width: 991px) {
  /*   code css   */
}
@media (min-width: 992px)(max-width: 1200px) {
  /*   code css   le max-with n'est pas utile ???*/
}

   Site "Mobile Friendly"             CSS3 : Media-Queries


-
vues  1478     En ligne actuellement :   1   Total des clics  1652747