Viewport 미디어쿼리 생성기
반응형 웹을 위한 CSS 미디어쿼리를 생성합니다.
미디어쿼리 설정
미디어쿼리 조건을 설정하세요
조건 1
프리셋
자주 사용되는 미디어쿼리 패턴을 선택하세요
생성된 CSS
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}일반적인 브레이크포인트
모바일:
max-width: 480px태블릿:
481px - 768px데스크톱:
min-width: 1024px대형 데스크톱:
min-width: 1200px미디어쿼리 가이드
주요 미디어 특성
- • width/height: 뷰포트의 너비/높이
- • min-width/max-width: 최소/최대 너비 조건
- • orientation: 화면 방향 (portrait/landscape)
- • resolution: 화면 해상도 (retina 디스플레이 등)
- • hover: 호버 기능 지원 여부
- • pointer: 포인터 정밀도 (터치/마우스)
사용 팁
- • Mobile First 접근법: min-width를 사용하여 작은 화면부터 설계
- • 논리 연산자로 복잡한 조건 조합 가능
- • print 미디어 타입으로 인쇄용 스타일 별도 지정
- • resolution을 사용하여 고해상도 디스플레이 대응