개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.

솔웅

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

반응형 웹 Media Query 를 위한 CSS 탬플릿 자료

2012. 7. 29. 04:04 | Posted by 솔웅

아래 글은 http://hardboiledwebdesign.com/ 을 만든 앤디가 자신이 몇개월간 작업하면서 만들어 놓은 CSS3 Media Query 관련 소스를 공개한 글 입니다.

앞으로 반응형 웹 작업을 하게 되면 아주 유용하게 쓰일 것 같습니다.

좋은 정보를 공유해 준 앤디에게 감사하면서 이 정보를 제 블로그에 정리해 둡니다.

Hardboiled CSS3 Media Queries

제가 책을 launch 하기 위해 Hardboiled Web Design 웹사이트를 만들면서 CSS3의 Media Query를 사용해서 responsive layout을 만드는 것은 아주 많은 일을 해야 되는 작업이었습니다.

지난 몇달간 Media Query를 사용하면서 각 프로젝트마다 여러번 그 소스들을 고쳤었습니다. 그래서 아예 표준문안처럼 만들어 놓으면 다음에 사용할 때 편할거라고 생각했죠.

이 hardboiled CSS3 Media Queries들은 각 디바이스들에 대한 empty placeholder들 입니다. 이걸 이용하면 당장 responsive 디자인을 시작할 수 있죠.

이것은 책을 내면서 같이 선사하는 toolkit이었습니다.

그리고 여러분들은 지금 이 소스를 다운로드 받으시고 오버라이드해서 마음대로 사용하실 수 있습니다.

Download the CSS file





/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

물론 하나의 스타일쉬트 파일에 방대한 responsive design style들을 넣고 싶지 않으실 겁니다.

이럴 경우 여러 스타일쉬트 파일로 소스를 구분하시고 html 파일에서 link element를 사용하시면

좋으실 겁니다.

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

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

</head>

Download the CSS file and any comments or suggestions for future improvements would be more than welcome.

Sign-up for email alerts or follow @itshardboiled for more updates and sneak previews.

저작자표시 비영리 동일조건

'etc. > Responsive Web' 카테고리의 다른 글

자바스크립트 기초 메모 (0)	2016.03.24

IT 기술 따라잡기