Bonjour. visiteurs jour : 52       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  Excel  Informatique  Infos  Internet  Forum  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  1265     En ligne actuellement :   1   Total des clics  1582370