web-dev-qa-db-fra.com

Styles css réactifs sur les appareils mobiles UNIQUEMENT

J'essaie de faire fonctionner mes styles CSS réactifs uniquement sur les tablettes et les smartphones. En gros, j'ai un style pour le bureau, un style pour mobile: portrait et un style pour mobile: paysage. Je ne veux pas du tout que les styles mobiles interfèrent avec la présentation du bureau. J'ai joué avec d'innombrables requêtes multimédia, mais le résultat est que les styles mobiles sont affichés sur le bureau ou que les styles mobiles s'affichent uniquement sur les appareils mobiles mais avec un seul ensemble de règles (non réactif). Est-il possible de garder les deux complètement séparés?

Mon code que j'ai maintenant va comme ceci:

/* 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 */
cssresponsive-designmedia-queries
18
jaspn

Ce que vous avez là devrait bien fonctionner, mais il n'y a pas de requête de média "Is Mobile/Tablet", vous êtes donc toujours bloqué.

Il existe des requêtes media pour les points d'arrêt courants , mais la gamme toujours croissante de périphériques ne garantit pas leur fonctionnement.

L'idée est que votre site conserve la même marque pour toutes les tailles. Vous devriez donc souhaiter que les styles se répercutent entre les points de rupture et ne mettent à jour que les largeurs et le positionnement afin de mieux correspondre à cette fenêtre.

Pour approfondir la réponse ci-dessus, utiliser Modernizr avec un test sans contact vous permettra de cibler les appareils tactiles qui sont le plus souvent des tablettes et des téléphones intelligents. Cependant, avec les nouvelles versions d'écrans tactiles, cette option n'est plus aussi efficace qu'auparavant. .

9
justinavery

Pourquoi ne pas utiliser une plage de requête multimédia.

Je travaille actuellement sur une mise en page réactive pour mon employeur et les plages que j'utilise sont les suivantes:

Vous avez vos principaux styles de bureau dans le corps du fichier CSS (1024 pixels et plus), puis pour des 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 périphériques utilisés - je me concentrerai sur le style approprié pour les tailles en fin de gamme (par exemple, 320, 480, 568, 768, 800, 1024), comme pour tous les autres sensible à la taille disponible.

En outre, n'utilisez pas le px partout: utilisez em ou%.

18
Ran

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

4
Raptor

Je devais 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'espacement des lignes semblaient bien dans tous les autres contextes. Je n'avais donc besoin que d'une exception pour le paysage mobile. Cette requête média a parfaitement fonctionné:

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