확대/축소를 통한 레이아웃 변경

내 목표는 윈도우 크기 조정 이벤트로 레이아웃을 변경하는 것과 동일한 방식으로 확대/축소시 레이아웃을 변경하는 것입니다.확대/축소를 통한 레이아웃 변경

많은 검색을 한 후에 모든 브라우저에서 확대/축소 이벤트를 감지 할 수 없다는 결론을 내 렸습니다. 따라서 윈도우 크기 조정과 마찬가지로 확대/축소를 위해 @media 쿼리를 사용해야한다고 결론을 내 렸습니다.

여기 내 @media 쿼리와 같은 모습입니다했다 가졌 :

/* LARGE window */ 
@media (min-width: 601px) { 
    .mainContent { 
     font-size: 125%; 
    } 

    .infoHeaderTextStyle { 
     font-size: 160%; 
    } 
} 

/* SMALL window */ 
@media (max-width: 600px) { 
    .mainContent { 
     font-size: 100%;            
    } 

    .infoHeaderTextStyle { 
     font-size: 100%; 
    } 
}

창 크기 조정을위한 훌륭한 작동합니다.

확대/축소를 위해 다음 규칙이 적용됩니다. @media ??

? .

@media (font-size > 20px) { 
    /* ZOOMED IN */ 
} 

@media (font-size <= 20px) { 
    /* ZOOMED OUT */ 
}

출처

2017-12-23 John Love

확실한 방법이 있는지 확신하지 못합니다. ['resolution' 미디어 기능] (https://developer.mozilla.org/en-US/docs/Web/CSS/%40media/resolution)으로 작업 할 수 있습니다 - [fiddle] (https : // jsfiddle. net/MrLister/oor82gf2 /)이지만, 전화기 나 망막 스크린과 같은 고해상도 장치를 확대 한 것처럼 항상 작동합니다. 그리고 그것은 모든 브라우저에서 구현되지 않습니다. –

예에 대한 폭의 화면을 확대하는 동안, 브라우저가 500 픽셀의 폭으로 가정하고 @media에 스타일을 적용 1000px 200 % (최대 폭을 : 500 픽셀) {}.

당신이 이것을 이해하기를 바랍니다. 확대/축소를 위해 CSS를 작성하려면 더 작은 장치에 대한 미디어 쿼리를 코딩하고 실험 해보십시오.

출처

2017-12-23 07:30:39 varun

https://angular.io/에서 볼 수 있습니다. 데스크톱에서 확대/축소하면 모바일 버전 – varun

을 볼 수 있습니다.하지만 내 의견에이 질문에 답한 것처럼 Retina 화면은 항상 동작하는 것처럼 보입니다. 확대. –

CSS에서 글꼴 크기를 조정하는 동안 제 제안은 "rem"을 사용하십시오. 미안이 작동하지 않으면 나는 망막 화면을 사용한 적이 없다 :) 그것이 작동하는 경우 알려 주시기 바랍니다. – varun

확대/축소를 통한 레이아웃 변경

답변

관련 문제