[css] 모바일 웹의 최대 장치 너비와 최대 너비의 차이점은 무엇입니까?

이 스타일 사용에 대해 어떻게 생각하십니까?

주로 “모바일 장치”에 사용되는 모든 중단 점 min(max)-device-width과 “데스크톱”에 주로 사용 되는 중단 점에 대해 min(max)-width.

너비를 잘못 계산하는 “모바일 장치”가 많이 있습니다.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml 을 보십시오 .

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

답변

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}