English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS 미디어 쿼리는 다양한 크기의 출력 장치에서 올바르게 표시되도록 문서를 포맷할 수 있도록 합니다.
미디어 쿼리는 특정 범위의 장치(예: 스마트폰, 태블릿 컴퓨터, 데스크톱 등)에 대해 웹 페이지의 표시 방식을自定义할 수 있도록 합니다. 텍스트를 변경하지 않아도 됩니다. 미디어 쿼리는 미디어 유형과 특정 미디어 기능(예: 장치 너비나 화면 해상도)과 일치하는 조건 표현식으로 구성됩니다.
미디어 쿼리는 논리 표현식이므로 true 또는 false로 해석할 수 있습니다. 미디어 쿼리에서 지정된 미디어 유형이 현재 표시되고 있는 문서의 장치 유형과 일치하며, 미디어 쿼리에서 지정된 모든 표현식이 만족된다면, 쿼리 결과는 true입니다. 미디어 쿼리가 true일 때, 관련 스타일 시트나 스타일 규칙이 대상 장치에 적용됩니다. 이는 표준 장치 미디어 쿼리의 간단한 예입니다.
/* 스마트폰 (가로 및 세로) ---------- */
@media screen and (min-width: 320px) 및 (max-width: 480px){
/* 스타일 */
}
/* 스마트폰 (세로) ---------- */
@media screen and (max-width: 320px){
/* 스타일 */
}
/* 스마트폰 (가로) ---------- */
@media screen and (min-width: 321px){
/* 스타일 */
}
/* 태블릿, 아이패드 (가로 및 세로) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* 스타일 */
}
/* 태블릿, 아이패드 (세로) ---------- */
@media screen and (min-width: 768px){
/* 스타일 */
}
/* 태블릿, 아이패드 (가로) ---------- */
@media screen and (min-width: 1024px){
/* 스타일 */
}
/* 데스크톱 및 랩톱 ---------- */
@media screen and (min-width: 1224px){
/* 스타일 */
}
/* 대형 스크린 ---------- */
@media screen and (min-width: 1824px){
/* 스타일 */
}테스트 보기‹/›훌륭한 팁:미디어 쿼리는 반응형 레이아웃을 만드는 최고의 방법입니다. 미디어 쿼리를 사용하면 스마트폰이나 태블릿 컴퓨터 등 다양한 장치에서 사용자가 브라우징을 할 때 웹사이트를 다르게自定义할 수 있으며, 페이지의 실제 내용을 변경하지 않아도 됩니다.
CSS 미디어 쿼리를 사용하여 웹 페이지 너비와 관련된 요소를 변경하여 다양한 장치에서 사용자에게 최상의 시청 경험을 제공할 수 있습니다.
다음 스타일 규칙은 스크린이나 뷰포트 크기에 따라 자동으로 컨테이너 요소의 너비를 변경합니다. 예를 들어, 뷰포트 너비가768픽셀, 그것은 뷰포트 너비의100%， 그것이 크면768픽셀이지만 작은1024픽셀이면75픽셀, 이와 같이 계속됩니다.
.container {
마진: 0 자동;
배경: #f2f2f2;
box-sizing: border-box;
}
/* 모바일 폰(가로와 세로) ---------- */
@media screen and (max-width: 767px){
.container {
width: 100%;
padding: 0 10px;
}
}
/* 터블릿과 아이패드(가로와 세로) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
.container {
width: 750px;
padding: 0 10px;
}
}
/* 저해상도 데스크톱과 랩톱 ---------- */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 0 15px;
}
}
/* 고해상도 데스크톱과 랩톱 ---------- */
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
padding: 0 20px;
}
}테스트 보기‹/›주의:CSS를 사용하여 요소에 적용할 수 있습니다.3 박스 크기 조정속성을 사용하여 더 직관적이고 유연한 레이아웃을 쉽게 생성할 수 있습니다.
CSS 미디어 쿼리를 사용하여 더 적응적이고 적은 사용자 정의만으로도 장치에 반응하는 다 열 웹 레이아웃을 만들 수 있습니다.
뷰포트 크기가 크거나 같으면768픽셀이면 아래 스타일 룰이 두 열 레이아웃을 생성하지만, 그보다 작거나 같으면768픽셀, 이는 열 레이아웃으로 표시됩니다.
.column {
width: 48%;
padding: 0 15px;
box-sizing: border-box;
background: #93dcff;
float: left;
}
.container .column:first-child{
margin-right: 4%;
}
@media screen and (max-width: 767px){
.column {
width: 100%;
padding: 5px 20px;
float: none;
}
.container .column:first-child{
margin-right: 0;
margin-bottom: 20px;
}
}테스트 보기‹/›