미디어쿼리(media queries)
인터넷 익스플로어 8이하 버전에서는 미디어 쿼리를 적용할 수 없다.
모바일에서는 미디어 쿼리를 전부 지원한다.
portrait는 height > width 때 적용(세로길이가 더 길때, 폰에서는 폰을 세로로 봤을 때를 의미)
@media all and (orientation:portrait){
#article {background:#000;}
}
landscape는 height < width 때 적용(화면을 가로로 돌렸을 때)
@media all and (orientation:landscape){
#article {background:#000;}
}
screen의 width가 640px 이하일때 아래와 같은 옵션을 적용
@media screen and (max-width:640px){
#article {background:#fff; font-size:1.25em; color:#000}
}
width가 최소640 최대 640px로도 지정가능
@media screen and (min-width:640px) and (max-width:640px){
#article {background:#fff; font-size:1.25em; color:#000}
}
댓글