반응형 웹사이트를 구축할 때 미디어 쿼리를 작성하는 방법과 사용해야 하는 중단점을 정확히 아는 것이 혼란스러울 수 있습니다.
min-width를 사용해야 합니까? 또는 max-width 당신의 미디어 쿼리에서? 그리고 중단점에서 어떤 기기를 타겟팅해야 하나요?
이 튜토리얼에서 이러한 질문에 대한 답변을 드리겠습니다.
먼저 약간의 컨텍스트:
CSS에서 미디어 쿼리란 무엇입니까?
미디어 쿼리는 CSS 스타일 세트에 대한 특정 조건을 대상으로 하는 데 사용할 수 있는 CSS 규칙 유형입니다.
반응형 디자인을 가능하게 하는 요소입니다. 반응형 디자인에서는 일반적으로 미디어 쿼리를 작성할 때 장치 너비를 기준으로 사용합니다. 이렇게 하면 사용자가 휴대전화, 태블릿 또는 데스크톱 화면을 사용하여 웹사이트를 로드하는지 여부에 따라 다른 CSS 규칙을 사용할 수 있습니다.
미디어 쿼리를 사용하는 방법을 살펴보겠습니다. 다음은 h1에 대한 몇 가지 CSS의 빠른 예입니다. 요소:
h1 {
font-size: 3rem;
}
@media (min-width: 43em){
h1 {
font-size: 3.75rem;
}
}
이 예에서는 상단에서 먼저 기본 font-size를 설정합니다. h1의 3rem에 태그를 지정합니다.
그런 다음 그 아래에 CSS 스타일 규칙이 내포된 미디어 쿼리 at-rule이 있습니다. 이 대체 규칙은 font-size를 설정합니다. h1용 3.75rem의 요소
미디어 쿼리 구문
미디어 쿼리 자체를 자세히 살펴보면 두 부분으로 구성되어 있음을 알 수 있습니다.
@media규칙에 따라- 미디어 기능 규칙.
우리가 목표로 삼고 있는 미디어 기능은 사용자의 뷰포트(화면 또는 브라우저 창 크기)의 너비입니다. min-width를 사용하여 너비 범위를 타겟팅합니다. 미디어 기능 규칙에서 43em(688px) 이상의 모든 표시 영역이 기준을 충족하도록 합니다.
사용자의 뷰포트가 미디어 쿼리의 기준을 충족하면 해당 미디어 쿼리의 CSS 규칙이 적용됩니다. 미디어 쿼리의 CSS가 첫 번째 규칙보다 더 구체적이기 때문에 첫 번째 CSS 규칙을 무시합니다.
CSS에서 중단점이란 무엇입니까?
반응형 디자인에서 미디어 쿼리에서 대상으로 하는 너비는 CSS 규칙을 변경하는 지점이기 때문에 중단점이라고 합니다.
예를 들어 h1의 경우 태그 스타일에서 중단점은 43em(688px) 너비입니다.
이것이 의미하는 바는 너비가 688px 미만인 뷰포트에서 h1 요소에는 font-size가 있습니다. 3렘의. 그런 다음 688px 이상에서 모든 h1 태그는 대신 3.75rem이 됩니다.
CSS 선택기에 대해 둘 이상의 중단점을 가질 수도 있습니다. h1을 계속 변경하려면 미디어 쿼리를 추가할 수 있습니다. 표시 영역이 62em(992px) 및 87em(1392px) 너비로 증가하면 크기가 커집니다.
원하는 만큼 중단점을 만들 수 있으며 원하는 너비를 사용할 수 있습니다.
중단점을 설정하는 데 있어 많은 자유가 있습니다. 그렇다면 미디어 쿼리에 몇 개의 중단점을 사용해야 할까요? 그리고 어떤 너비를 사용해야 합니까?
어떤 중단점을 사용해야 합니까?
다음은 경험에 대한 한 가지 규칙입니다. 존재하는 모든 장치 너비를 대상으로 하는 중단점을 사용하여 수많은 미디어 쿼리를 만들려고 하지 마십시오.
이것은 반응형 디자인의 초기에 관행이었습니다. 그러나 오늘날에는 휴대폰, 태블릿 및 화면 크기가 너무 다양하여 실용적이지 않습니다. 혼란스럽고 비효율적인 미디어 쿼리 수만 얻게 됩니다.
대신 디자인에 따라 중단점을 선택하십시오.
예를 들어 데스크탑에서는 두 개의 열이 되고 모바일 및 태블릿 장치에서는 하나의 열로 쌓이는 디자인이 있다고 가정해 보겠습니다.
모바일 너비로 시작하여 위로 이동하여 디자인을 두 열로 변경하려는 뷰포트 너비 지점을 선택합니다. 이것이 중단점이 됩니다.
일반적으로 모바일에서 큰 화면에 이르는 너비를 포괄하는 3~4개의 중단점 범위로 시작합니다.
중단점을 43em(688px), 62em(992px) 및 82em(1312px) 너비로 설정했다고 가정해 보겠습니다. 휴대전화는 모두 688px 미만이고, 대부분의 태블릿은 688px에서 992px 사이, 작은 화면은 992px에서 1312px 사이, 큰 화면은 1312px보다 큽니다.
이 접근 방식을 사용하면 해당 표시 영역 너비 범위 내의 모든 기기를 다룰 수 있습니다.
더 작은 범위의 중단점으로 작업하면 반응형 스타일을 일관되게 유지하는 데 도움이 됩니다. 그리고 먼저 중단점 세트를 선택하고 프로젝트의 모든 요소에 대해 동일한 중단점을 사용하는 것이 좋습니다.
이렇게 하면 모든 다른 너비에서 임의의 중단점을 생성하지 않고 잠재적으로 예기치 않은 동작을 생성하지 않습니다. 일을 단순하게 유지하고 한 세트의 중단점을 고수하십시오. 나중에 정말로 필요한 경우 언제든지 추가 중단점을 추가할 수 있습니다.
중단점에서 최소 너비 또는 최대 너비를 사용해야 합니까?
내가 많이 보는 일반적인 질문 중 하나는 min-width를 사용해야 하는지 여부입니다. , max-width , 또는 둘 다 미디어 쿼리 중단점에 있습니다.
대부분의 사람들이 사용하는 방식과 내가 선호하는 방식은 min-width만 사용하는 것입니다. 당신의 중단점에서. Bootstrap 및 Foundation과 같은 반응형 프레임워크와 CSS Tricks 및 Smashing Magazine과 같은 업계 사이트는 모두 이 방법을 사용합니다.
이렇게 하면 미디어 쿼리 없이 모바일 스타일을 기본 스타일로 설정할 수 있습니다. 그런 다음 최소 너비 미디어 쿼리를 사용하여 점점 더 큰 기기에 대한 스타일을 추가합니다.
이 모바일 우선 접근 방식은 h1에서 수행한 것입니다. 예시. 대부분의 경우에 잘 작동합니다. 특히 표시 영역 너비가 클수록 모바일 너비에는 필요하지 않은 추가 CSS 스타일이 필요한 경향이 있기 때문입니다.
실제 애플리케이션에서 어떻게 보일지 궁금하십니까?
flexbox를 사용하여 웹사이트에 대한 2열 레이아웃을 만들고 싶다고 가정해 보겠습니다.
HTML 마크업에서 <body>에 두 개의 요소가 있습니다. 태그:<main> 주요 콘텐츠 및 <aside> 사이드바:
<body>
<main class="blue">
<h1>Here is our main content!</h1>
</main>
<aside class="magenta">
<h2>Here is our sidebar content!</h2>
</aside>
</body>CSS 스타일에서 모든 것이 한 열에 있도록 메인 콘텐츠 아래에 사이드바를 쌓고 싶습니다. 따라서 모바일용 추가 스타일이 필요하지 않습니다.
더 큰 데스크탑 너비에서 flexbox를 켜고 레이아웃을 두 열로 표시하려고 합니다. CSS에서 62em(992px) 기준으로 미디어 쿼리를 생성하여 이 작업을 수행할 수 있습니다. 이 쿼리는 바탕 화면 너비가 더 작을 때부터 적용됩니다.
이에 대한 CSS는 다음과 같습니다.
@media (min-width: 62em){
body { display: flex; }
main { flex: 1 0 75%; }
aside { flex: 1 0 25%; }
}
이제 max-width를 대신 사용하려면 어떻게 해야 할까요? 미디어 쿼리? 확실히 가능하지만 다음과 같이 모바일 및 태블릿 너비용 플렉스박스를 취소해야 합니다.
body { display: flex; }
main { flex: 1 0 75%; }
aside { flex: 1 0 25%; }
@media (max-width: 62em){
body { display: block; }
}
이 경우 데스크탑의 기본 스타일은 flexbox를 사용합니다. 그리고 <body>를 설정하여 뷰포트 너비가 62em(992px)보다 작은 경우 flexbox를 취소해야 합니다. display: block display: flex 대신 .
중단점에 픽셀, rem 또는 em을 사용해야 합니까?
내가 em을 사용하고 있다는 것을 눈치채셨을 것입니다. 픽셀 대신 내 중단점의 단위. 픽셀은 우리 대부분에게 더 익숙하지만 CSS에서는 절대 단위입니다. 이는 다른 요소와 관련하여 변경되지 않음을 의미합니다.
대조적으로 em과 같은 상대 단위는 , rem , 및 vw 단위는 font-size와 같은 다른 요인에 따라 최종 크기를 얻습니다. 부모 요소 또는 브라우저에 설정된 루트 글꼴 크기.
CSS(중단점 뿐만 아니라 글꼴 크기)에서 픽셀을 사용할 때의 문제는 절대적이고 변경되지 않기 때문에 사용자에게 필요한 경우 픽셀을 조정할 수 있는 제어 권한을 주지 않는다는 것입니다. 이것은 접근성 문제이므로 일반적으로 font-size와 같은 중요한 측정에 픽셀을 사용하는 것은 좋은 솔루션이 아닙니다. 및 중단점 너비.
Zell Liew는 중단점과 다양한 단위로 수행한 훌륭한 테스트를 작성하여 em 중단점은 "네 가지 브라우저 모두에서 일관되게 수행된 유일한 단위"였습니다. Dan Burzo가 문서화한 Safari에는 모바일 중단점이 예상보다 빨리 표시되는 버그가 있습니다.
Safari 버그보다 접근성을 우선시하므로 여전히 em을 사용합니다. 단위.
이 기사가 미디어 쿼리에 사용해야 하는 중단점을 설명하는 데 도움이 되었기를 바랍니다.
