요즘은 많은 스마트폰과 태블릿이 쏟아지고 있습니다..

다양한 기기와 브라우저에 만족하는 홈페이지를 제작하기가 쉽지 않습니다..

다양한 미디어와 브라우저를 위한 CSS Media Query에 대하여 아래를 참조하시기 바랍니다..

특별히 골치아픈 IE8이하 버전 처리를 위한 jQuery 안배도 살펴보시기 바랍니다.

==============================================================

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* STYLES GO HERE */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* STYLES GO HERE */

}

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* STYLES GO HERE */

}

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* STYLES GO HERE */

}

/* iPads (landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* STYLES GO HERE */

}

/* iPads (portrait) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* STYLES GO HERE */

}

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* STYLES GO HERE */

}

/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* STYLES GO HERE */

}

/* iPhone 5 (portrait & landscape)----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px) {

/* STYLES GO HERE */

}

/* iPhone 5 (landscape)----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : landscape) {

/* STYLES GO HERE */

}

/* iPhone 5 (portrait)----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : portrait) {

/* STYLES GO HERE */

}

====================

ie8이하 버전에 대한 jQuery 안배

다음 링크에서 다운로드하여 

Download jQuery plugin

​

웹페이지에 반영하거나​

<script src="js/css3-mediaqueries.js"></script>

다운로드없이

웹페이지 head부분에 아래문구를 추가하면 됩니다.

<!-- css3-mediaqueries.js for IE less than 9 -->

<!-- [if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->