Affichage mobile et PC

J'essaie de créer un code simple pour l'affichage des PC et des téléphones portables.Affichage mobile et PC

<html> 
<head> 
<style> 
@media (min-device-width: 770px) { 
#containermobile {display:none;} 
} 
body { 
background-color: #000000; 
} 
@media (max-device-width: 769px) { 
#containerPC {display:none;} 
} 
body { 
background-color: #ffffff; 
} 
</style> 
</head> 

<body> 

<div id="containerPC">pc</div> 
<div id="containermobile">mobile</div> 

</body> 

</html>

Cependant, la couleur d'arrière-plan ne s'affiche pas. Qu'est-ce que je fais mal ?

Source

2017-05-21 Theodore.us

Vous n'avez pas placé les blocs body dans les blocs @media, de sorte que le second remplace simplement le premier et vous obtenez un arrière-plan blanc. En outre, dans le but de tester, vous devriez probablement éviter d'utiliser #000000 (noir) et #ffffff (blanc). Le premier cachera le texte, et le dernier est la couleur d'arrière-plan par défaut de sorte que vous ne pouvez pas être sûr que votre code a fonctionné.

Voici un exemple de ce qui fonctionne correctement:

@media (min-device-width: 770px) { 
#containermobile {display:none;} 
body { 
background-color: #444444; 
} 
} 
@media (max-device-width: 769px) { 
#containerPC {display:none;} 
body { 
background-color: #cccccc; 
} 
}

Source

2017-05-21 01:54:33

Affichage mobile et PC

Répondre

Questions connexes