모바일 및 PC 디스플레이

PC 및 모바일 폰 디스플레이를위한 간단한 코드를 만들려고합니다.모바일 및 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>

그러나 배경색이 표시되지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까 ?

출처

2017-05-21 Theodore.us

블록 @media 블록 안에는 body 블록을 넣지 않았으므로 두 번째 블록이 첫 번째 블록을 재정의하고 흰색 배경을 얻습니다.

또한 테스트를 위해 #000000 (검정) 및 #ffffff (흰색)을 사용하지 않는 것이 좋습니다. 전자는 텍스트를 숨기고 후자는 기본 배경색이므로 코드가 작동하는지 여부를 확신 할 수 없습니다.

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

는

제대로 작동 무엇의 예입니다

출처

2017-05-21 01:54:33

모바일 및 PC 디스플레이

답변

관련 문제