CSS3 장치 너비와 너비의 차이점에 대한 간략한 설명

이 기사에서는 CSS 미디어 쿼리의 장치 너비와 너비의 차이에 대해 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

【추천 튜토리얼: CSS 동영상 튜토리얼】

1.device-width

정의: 출력 장치 화면의 가시 너비를 정의합니다.

웹페이지가 Safari에서 열리든 웹뷰에 내장되어 있든 상관없이 장치 너비는 장치에만 관련됩니다. 동일한 장치라면 해당 값은 변경되지 않습니다.

예를 들어 iPhone6의 device-width*device-height는 375*667이며 dpr 등과는 아무런 관련이 없습니다.

2.width

정의: 출력 장치에서 페이지의 표시 영역 너비를 정의합니다.

출력은 웹페이지의 표시 영역의 너비와 높이입니다. 웹페이지가 웹뷰에 중첩된 모바일 웹페이지라고 가정하면 너비는 실제로 웹뷰의 너비와 높이입니다. 브라우저, 너비 및 높이가 다를 수 있으며 페이지가 rem 레이아웃을 사용하고 레티나 화면의 경우 dpr>1, content="width=device-width,initial-scale=0.5,minimum-scale=이 메타 태그 0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover", iPhone 6의 너비 크기는 750px입니다.

여기에서는 가로 화면 상황을 고려할 필요가 없기 때문에 device-width 및 device-height를 더 사용합니다

예를 들어 iphoneX에 적응하면 이미 iphoneX의 크기(375*812)를 알고 있습니다. 다음 설명은 다음과 같습니다.

/*iphone x*/
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .foriphoneX()
}

또 다른 예는 최신 Samsung 접이식 화면

@media screen and (device-width: 586px) and (device-height: 820px){
    html{
        font-size: 110px !important;
    }
}

간단히 말하면, 장치 너비는 장치의 너비 변경이나 다른 레이아웃 구성표의 너비와 관련이 있습니다. Different 컨테이너의 표시가 다를 수 있습니다. 여기서는 device-width가 js의 window.screen.width와 동일하고 width가 js의 document.body.clientWidth와 동일하다고 생각합니다.

화웨이 접이식 스크린 적응도 기록해두세요. 현재 실제 휴대폰이 없어서 펼쳤을 때 화웨이의 해상도가 2200*2480인 것만 알고 있어서 아직 DPR은 확실하지 않습니다. -width 및 device-height(비즈니스 로직과 관련되어 있기 때문에 여기에서는 쿼리에 너비를 사용할 수 없음)이므로 device-aspect-ratio를 선택했습니다.

처음에는 less

@media (device-aspect-ratio: 55/62) {
    /*适配*/
}

그런 다음 CSS의 device-aspect-ratio는 소수점으로 계산됩니다.

@media (device-aspect-ratio: 0.887097) {
    /*适配*/
}

device-aspect-ratio는 소수점을 지원하지 않으므로 일치할 수 없습니다.

그래서 less가 55/62 결과를 실행하는 것을 방지하는 방법을 확인한 결과 다음과 같이 속성을 따옴표로 묶고 앞에 물결표를 추가하면 됩니다.

@media (device-aspect-ratio: ~"55/62") {
    /*适配部分*/
}

문제가 해결되었습니다!

그러나 MDN에서는 device-aspect-ratio가 더 이상 권장되지 않습니다. 더 나은 솔루션을 찾으면 대안을 사용하겠습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 CSS3 장치 너비와 너비의 차이점에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!