반응형
@media 미디어타입 and (미디어 특성){ css코드 }
미디어 타입
all :모든 미디어 타입에 적용
screen: 컴퓨터 화면, 타블렛, 스마트폰
print: 인쇄 전용
미디어 특성
width 뷰포트 가로 너비
max-width 뷰포트 최대 가로 너비(이하)
min-width 뷰포트 최소 가로 너비(이상)
height 뷰포트 세로 너비
max-height 뷰포트 최대 세로 너비(이하)
min-height 뷰포트 최소 세로 너비(이상)
orientation 뷰포트 방향(portrait, landscape) portrait(세로가 더 긴 상태) landscape(가로가 더 긴 상태)
<div class="container"><div>
<style>
.container{
width: 100px;
height: 100px;
background: red;
}
/* 최소 너비가 700px 이상이면 css적용 */
@media screen and (max-width: 700px){
.container{
height: 300px;
background: blue;
}
}
</style>
반응형
'2020 > CSS' 카테고리의 다른 글
| flex (0) | 2020.03.24 |
|---|---|
| css 다단 (0) | 2020.03.24 |
| animation-play-state (0) | 2020.03.24 |
| animation-fill-mode (0) | 2020.03.24 |
| animation-iteration-count, animation-direction (0) | 2020.03.24 |
꽃꽂이하는개발자