CSS에서 장치 너비와 너비의 차이점은 무엇입니까

1. device-width

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

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

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

(추천 튜토리얼: CSS 튜토리얼)

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)를 알고 있습니다. 다음 진술:

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

간단히 말해서, 장치 너비는 장치 너비와 관련이 있습니다. 너비는 다른 레이아웃 구성표나 다른 컨테이너에 표시될 때 다를 수 있습니다. device-width는 js의 window.screen.width와 동일하고 width는 js의 document.body.clientWidth와 동일합니다.

저의 Huawei 접이식 스크린 적응도 기록해두세요. 현재 실제 기기가 없기 때문에 Huawei의 펼쳤을 때 해상도가 2200*2480이라는 것만 알고 있는데, DPR은 아직 명확하지 않아서 잘 모르겠습니다. device-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의 사용이 더 이상 권장되지 않으며 이 속성은 폐기됩니다.

추천 관련 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS에서 장치 너비와 너비의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!