티스토리 뷰



화면 비율에 따라 브라우저 크리에 따라 웹사이트의 컨텐츠를 변화시켜 주는 사이트
데모보기 : 바로가기
화면의 비율을 변화시켜 보면 알 수 있습니다.


Max Width
@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

CSS 부분
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />


Min Width
@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries
@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

iPhone 4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

ipad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

다음 브리우져 크기에 맞게 설정을 해주면 다음과 같은 효과를 줄 수 있다.


댓글
댓글쓰기 폼