미디어 쿼리를 사용하면 장치 디스플레이의 특성(예: 뷰포트 너비, 화면 비율, 장치 방향: 가로 또는 세로)에 따라 CSS 스타일을 설정할 수 있습니다. more 미디어 특성을 탐지하기 위한 조건식으로 구성됩니다. 미디어 쿼리에서 감지할 수 있는 미디어 속성은 width , height , color 등입니다. 미디어 쿼리를 사용하면 페이지 콘텐츠를 변경하지 않고도 특정 출력 장치에 대한 표시 효과를 사용자 지정할 수 있습니다.
실제 작업은 장치에 요청하여 시작됩니다(표현식이라고 함). 표현식 결과가 true이면 미디어 쿼리의 CSS가 적용됩니다. 내의 미디어 쿼리 CSS는 무시됩니다.
@media screen and (max-width:600px) { }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .row{ border: 1px solid red; } .col{ display: inline-block; width: 100%; height: 100px; background-color: green; } /* <768px */ @media screen and (max-width:768px) { .col{ width: 100%; } } /* >=992 and */ @media screen and (min-width:992px){ .col{ width: 49%; } } /* >=768px and <1200px */ @media screen and (min-width:768px) and (max-width:1200px){ .col{ width: 48%; } } /* >=1200px */ @media screen and (min-width: 1200px) { .col{ width: 33%; } } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>
768px로 축소한 후 렌더링
추천 학습: "web front-end"
위 내용은 미디어 쿼리 @media 사용 분석(코드 데모 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!