1448 sujets

Web Mobile et responsive web design

Bonjour,
J'utilise device-width pour des régles liées au x appareils et device pour les règles liées au layout.
J'avais donc écrit pour une régle d'exception pour les smartphones ( line-height plus petite et font-size plus grande).

body {
	background-color: #fff;	
	font-family: helvetica, arial, sans-serif; 
	font-size: 16px;
	font-size: 1rem; 
	line-height: 1.38; 
	color: #333;					
} 
@media screen
	and (min-device-width: 320px) and (max-device-width: 414px)
	and (min-device-height: 480px) and (max-device-height: 736px){
		body { 
			font-size: 18px;
			font-size: 1.125rem; 
			line-height: 1.26; 							
		} 			  		 
	}

Comme je suis en mobile-first j'aurai donc voulu réécrire ce code:

body {
	background: #fff;	
	font-family: helvetica, arial, sans-serif;	
	font-size: 18px;
	font-size: 1.125rem; 				
	line-height: 1.26; 	
       color: #333;	 				
}
@media screen and (min-device-width: 415px) and (min-device-height: 737px) {
		body { 
			font-size: 16px;
			font-size: 1rem; 
			line-height: 1.38; 
			color: #333;					
		} 			  		 
	}

Est-ce correct? ou sinon comment l'écrire.
Et pour les tablettes et petits écrans je pensais mettre un min-device-wdith: 1280px, mais est-ce suffisant

Cordialement
Modifié par cpalo (20 Aug 2015 - 08:13)
Finalement je choisis la vraie démarche mobile-first sans régle d'exception pour les smartphones.
Il est vrai que la règle initiale concernera tous les écrans jusqu'414px (Iphone6) de large, mais dans la réalité ce ne sont que des smartphones.

Petite question: lorsque les smartphones sont en mode paysage, est-ce cette régle est suffisante pour cela s'applique encore?