미디어 쿼리 @media 사용 분석(코드 데모 포함)
- 藏色散人앞으로
- 2022-08-07 16:48:142924검색
미디어 쿼리란 무엇입니까?
미디어 쿼리를 사용하면 장치 디스플레이의 특성(예: 뷰포트 너비, 화면 비율, 장치 방향: 가로 또는 세로)에 따라 CSS 스타일을 설정할 수 있습니다. more 미디어 특성을 탐지하기 위한 조건식으로 구성됩니다. 미디어 쿼리에서 감지할 수 있는 미디어 속성은 width , height , color 등입니다. 미디어 쿼리를 사용하면 페이지 콘텐츠를 변경하지 않고도 특정 출력 장치에 대한 표시 효과를 사용자 지정할 수 있습니다.
1. 미디어 쿼리 작업 방법
실제 작업은 장치에 요청하여 시작됩니다(표현식이라고 함). 표현식 결과가 true이면 미디어 쿼리의 CSS가 적용됩니다. 내의 미디어 쿼리 CSS는 무시됩니다.
2. 미디어 쿼리 구문
@media screen and (max-width:600px) {
}3. 코드 데모 1qqq
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제