2
나는 RWD (Responsive Web Design)에 대해 몇 가지 테스트를하고 있으며 가장 일반적인 중단 점을 찾고 있습니다. 나는이 건너 온 :(min-device-width) 및 (min-width)는 무엇을 사용해야합니까?
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background-color: #7763a5; }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body {
background-color: #011C40; }
}
@media only screen and (min-width : 1224px) {
body {
background-color: #3957FC; }
}
내가 (크롬을 사용) 브라우저의 창 크기를 조정하기 위해 노력하고 스타일 중 어느 것도 (min-width : 1224px) 속성을 가진 사람을 제외하고 적용됩니다 없다는 것을 알게되었습니다.
왜 이런 일이 발생하며 휴대용 장치 스타일을 테스트해야합니까? 또한, 다른 장치에 대한 조건문을 쓰는 것이 좋습니다.
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
데스크톱을 겨냥한 마지막 장치는 "장치"부분없이 작성되기 때문에 다른 문에서 언급했습니다.
이 질문에 대한 답을 difference between max-width and max-device-width으로 보았습니다. 공평하게 말하자면, 나는 답을 얻지 못했지만, 창 크기를 조정할 때 왜 내 바탕 화면의 브라우저가 스타일 적용을 거부하는지 알지 못합니다.