Bonjour     visiteurs jour : 49     Total clics   :   1210473       Sites associés 

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





Coucou et merci


 
Clics 342

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


Responsive Web

Vos messages sont modérés.   Les visiteurs non inscrits ont leur pseudo préfixé par x_.   Merci de respecter la loi et les personnes.

Votre message -->

Classement
par date
croissante.
décroissante.
Vous
inaugurez
ce forum,
félicitations.
Pseudo     Le 19-2-2018.   Titre  

 

Total des visiteurs  :    482971   dont aujourd'hui :   49    En ligne actuellement :  1      Total des clics   1210473