[CSS] CSS Media Query for Mofile

폭에 따른 View가 다르게 보여주는 방식를 쉽게 처리하는 방법은 바로 CSS Media Query를 이용하는 것이다.

Max Width값

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

 

 

link 방식

<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; } 
}

 

Device Width

@media screen and (max-device-width: 480px) {
	.class { background: #000; } 
}

 

For iPhone4

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

 

 

For iPad

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

 

Media Queres for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

• CSS Tricks - using jQuery to detect browser size
• The Man in Blue - using Javascript (this article is written 6 years ago)
• jQuery Media Queries Plugin

Colly

The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

웹페이지 뷰

모바일 뷰

폭에 따른 이미지 사이즈를 자동으로 변화를 주는 방법
<img>의 스타일 img { max-width: 100%; }

예제 사이트) http://www.rachelandrew.co.uk/

 

출처:
http://webdesignerwall.com/tutorials/css3-media-queries

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/