다른 크기의 너비에 맞게 웹 페이지를 응답하게하려면 어떻게해야합니까?

Question

'반응 형 웹 페이지'를 만드는 법을 배우기 시작했고 레이아웃을 변경하기 위해 웹 페이지가 표시된 창의 너비를 사용했습니다. 1440p (2560x1440) 및 Ultrawide 1080p (2560x1080) 이후 레이아웃을 변경하기 위해 표시되는 모니터의 눈금을 감지하는 방법 (4 : 3, 표준 16 : 9, 21 : 9 등)이 있는지 궁금합니다.)는 동일한 픽셀 너비를 공유합니다. 단어 "및"로 구분 한 미디어 쿼리

Answer 1

시도 설정 폭 및 높이 : 이러한 미디어 쿼리

@media (min-height: 500px) and (min-width: 580px) { 
     /* CSS stuff */ 
    } 

는 화면의 상이한 비율을 타겟팅 - 동일한 폭을 갖는 동안에.

Answer 2

쉬운. 가로 세로 비율 얻기 위해 단지 screen.height에 의해 screen.width을 분할,

@media screen and (min-width: 1336px) and (min-height: 768px) { 
    /* Your code */ 
} 

는 자바 스크립트를 수행하십시오 : 단어 and 두 개의 미디어 쿼리를 결합, CSS에서 그것을 할 수 있습니다!

var aspectratio = screen.width/screen.height