stylesheet mobile interférer avec les principaux stylesheet

Question

J'ai mon stylesheet mobile en tant que tel:

<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />

Et mon principal stylesheet comme tel:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

Quand je vais sur la page d'un appareil mobile, il a un mélange de règles de style de feuille mobile et principal. Comment puis-je rendre la feuille de style mobile exclusive aux appareils mobiles et la feuille de style principale exclusive à l'écran?

Answer 1

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> 

<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' /> 

Assurez-vous également que vous avez dans votre tête:

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

Answer 2

Eh bien, votre problème est que les deux appareils utilisent des écrans. Votre fichier css/style.css cible tous les appareils qui utilisent un écran, et tout style devrait être applicable à un appareil étroit comme à un appareil large. Vous devrez peut-être refactoriser vos règles de style. De même, assurez-vous que votre feuille de style mobile est répertoriée après celle de l'écran générique, sinon la feuille de style générique remplacera la feuille mobile.