Styles css réactifs sur les appareils mobiles SEULEMENT

Question

J'essaie de faire fonctionner mes styles CSS sensibles seulement sur les tablettes et les smartphones. Fondamentalement, j'ai un style pour ordinateur de bureau, un style pour mobile: portrait et un style pour mobile: paysage. Je ne veux pas que les styles mobiles interfèrent avec la présentation du bureau. J'ai joué avec d'innombrables requêtes de médias, mais le résultat soit les styles mobiles sont affichés sur le bureau, ou les styles mobiles sont affichés uniquement sur les appareils mobiles, mais avec un seul ensemble de règles (non-réactif). Y a-t-il un moyen de garder les deux complètement séparés?

Mon code je passe en ce moment comme celui-ci:

/* regular desktop styles */ 

@media only screen 
and (max-device-width: 600px) 
{ ... } 

/* mobile only styles when the device is 0-600px in maximum width */ 

@media only screen 
and (max-device-width: 1000px) 
{ ... } 

/* mobile only styles when the device is up to 1000px in maximum width */ 

Answer 1

Qu'est-ce que vous avez là devrait bien fonctionner, mais il n'y a pas de requête de média "Is Mobile/Tablet" réelle alors vous allez toujours être coincé.

Il existe media queries for common breakpoints, mais avec la gamme d'appareils en constante évolution, leur fonctionnement n'est pas garanti. L'idée est que votre site conserve la même marque pour toutes les tailles. Vous devez donc faire en sorte que les styles soient répartis en cascade sur les points d'arrêt et ne mettre à jour que les largeurs et le positionnement pour mieux correspondre à cette fenêtre. Pour compléter la réponse ci-dessus, l'utilisation de Modernizr avec un test sans contact vous permettra de cibler les appareils tactiles qui sont probablement des tablettes et des téléphones intelligents, mais avec les nouvelles versions d'écrans tactiles qui ne sont pas une bonne option comme autrefois. Pourquoi ne pas utiliser une plage de requête multimédia?

Answer 2

Oui, cela peut être fait via javascript détection de fonction (ou la détection du navigateur, par exemple Modernizr). Ensuite, utilisez yepnope.js pour charger les ressources requises (JS et/ou CSS)

Answer 3

Je travaille actuellement sur une mise en page réactif pour mon employeur et les gammes que je utilise sont les suivantes:

Vous avez vos principaux styles de bureau dans le corps du fichier CSS (1024px et ci-dessus) et puis pour les tailles d'écran spécifiques J'utilise:

@media all and (min-width:960px) and (max-width: 1024px) { 
    /* put your css styles in here */ 
} 

@media all and (min-width:801px) and (max-width: 959px) { 
    /* put your css styles in here */ 
} 

@media all and (min-width:769px) and (max-width: 800px) { 
    /* put your css styles in here */ 
} 

@media all and (min-width:569px) and (max-width: 768px) { 
    /* put your css styles in here */ 
} 

@media all and (min-width:481px) and (max-width: 568px) { 
    /* put your css styles in here */ 
} 

@media all and (min-width:321px) and (max-width: 480px) { 
    /* put your css styles in here */ 
} 

@media all and (min-width:0px) and (max-width: 320px) { 
    /* put your css styles in here */ 
} 

Cela couvrira à peu près tous les appareils utilisés - je me concentrerais sur obtenir le style correct pour les tailles à la fin de la plage (ie 320, 480, 568, 768, 800, 1024) comme pour tous les autres, ils seront simplement sensibles à la taille disponible.

De même, n'utilisez pas px n'importe où - utilisez em ou%.

Answer 4

J'ai dû résoudre un problème similaire - je voulais que certains styles ne s'appliquent qu'aux appareils mobiles en mode paysage. Essentiellement, les polices et l'interligne semblaient bien dans tous les autres contextes, alors j'avais juste besoin de la seule exception pour le paysage mobile. Cette requête média a parfaitement fonctionné:

@media all and (max-width: 600px) and (orientation:landscape) 
{ 
    /* styles here */ 
}