Bonjour. visiteurs jour : 51
Au président
Beauté santé
Infos loisirs
Ensemble
Jean
Informatique
Einstein
Santé corona
Les joies de l'informatique et de l'internet !
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 "Mobile Friendly" Le désign du site doit être souple et s'adapter aux tailles d'écran avezc des zones tactiles suffisamment espacées. Jusquà 479px : smartphone en portrait De 480px à 959px : smartphone, petite tablette en paysage, tablette en portrait Si votre design initial est basé sur une largeur de 1024px, remplacer le point de rupture 960px par 1024px.
<!DOCTYPE html>
Laisser tomber la balise meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1"> ou (?)
"Comprendre le Viewport dans le Web mobile".
Site "Mobile Friendly" CSS3 : Media-Queries
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
Les points de rupture pour un affichage « normal » de 960px de largeur:
De 960px à 1280px : tablette en paysage,
1281px et au delà : grand écran.
Passer en HTML 5
<html lang="fr">
<meta charset="iso-8859-1"/>
<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) */
}
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 ???*/
}