반응형 레이아웃이란 웹 사이트가 여러 유형의 터미널과 호환될 수 있지만 각 터미널에 대해 특정 웹 페이지 버전을 만들 필요가 없음을 의미합니다. 반응형 레이아웃은 다양한 단말기의 사용자에게 보다 편안한 인터페이스와 사용자 경험을 제공할 수 있습니다. 점점 더 큰 화면의 모바일 장치가 등장하면서 반응형 레이아웃은 개발자들이 널리 사용하는 WEB 기술이 되었습니다.
장점:
다양한 해상도의 장치에 대한 높은 유연성
멀티디바이스 디스플레이 적응 문제를 빠르게 해결할 수 있습니다
단점:
다양한 기기와 호환, 작업량이 많고 효율성이 낮음
코드가 복잡하고, 숨겨져 있고 쓸모없는 요소가 나타나며, 로딩 시간이 길어집니다
사실 이것은 여러 요소의 영향을 받아 최상의 결과를 얻을 수 없는 절충적인 디자인 솔루션입니다
웹사이트의 원래 레이아웃 구조를 어느 정도 변경하여 사용자들에게 혼란을 줄 수 있습니다
반응형 레이아웃에 대해 이야기할 때 미디어 쿼리라고 하는 CSS3의 미디어 쿼리를 생각해야 합니다. 미디어 쿼리는 사용하기 쉽고 편리하며 강력하며 이 도구를 사용하면 디자인할 수 있습니다. 매우 편리합니다. 풍부하고 활용도가 높은 다양한 인터페이스입니다.
미디어 쿼리를 사용하면 CSS가 동일한 미디어의 다양한 미디어 유형 및 다양한 조건에 더 정확하게 작동할 수 있습니다. 미디어 쿼리의 대부분의 미디어 기능은 "크거나 같음" 및 "작거나 같음"을 표현하기 위해 min 및 max를 허용합니다. 예를 들어, 너비에는 HTML 및 XML뿐만 아니라 CSS의 @media 및 @import 규칙에도 사용할 수 있는 min-width 및 max-width가 있습니다. 이 속성을 통해 우리는 다양한 장치, 특히 더 널리 사용될 모바일 장치에서 풍부한 인터페이스를 쉽게 구현할 수 있습니다.
용도 및 구조
1. 링크에 @media 사용
위 사용법에서는 생략 가능하며 컴퓨터 모니터에 한합니다. 첫 번째 조건의 max-width는 렌더링할 인터페이스의 최대 너비를 나타내고, max-device-width는 장치의 최대 너비를 나타냅니다.
2. 스타일 시트에 @media
삽입
@media ( min-device-width:1024px ) 및 ( max-width:989px ), 화면 및 ( max-device-width:480px ), ( max-device-width:480px ) 및 ( 방향: 가로 ) , ( 최소 장치 너비:480px ) 및 ( 최대 장치 너비:1024px ) 및 ( 방향: 초상화 ) {}
이 예에서 컴퓨터 모니터 해상도(너비)는 1024px 이상으로 설정됩니다(최대 표시 너비는 989px). 화면 너비가 480px 이하인 휴대용 장치. 너비가 480px이고 가로로 배치됩니다. 화면 너비가 480px 이상 1024px 미만이고 세로로 배치된 장치에 대한 CSS 스타일입니다.
미디어 쿼리를 통한 반응형 레이아웃
페이지의
에 을 추가할 수도 있습니다. Moving 원래 디스플레이 크기와 장치의 크기 조정 여부를 설정하는 명령문입니다.
매개변수:
width – 뷰포트의 너비
height – 뷰포트의 높이
초기 스케일 - 초기 스케일링
최소 배율 – 사용자가 확대/축소할 수 있는 최소 비율
최대 배율 – 사용자가 확대/축소할 수 있는 최대 비율
사용자 확장 가능 – 사용자가 수동으로 확장할 수 있는지 여부
미디어 쿼리는 대부분의 브라우저에서 지원되지만 IE 브라우저 등 일부 브라우저에서는 지원되지 않습니다. 이를 해결하려면 미디어 쿼리 Javascript를 사용해야 합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
