미디어쿼리(media queries) 적용

미디어쿼리(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}

 

}