@media all and (max-width:480px) { 해상도 480px이하 Size 의 css 적용 적용 }@media all and (min-width:481px) and (max-width:1024px) { 해상도 481px이상 1024px이하 Size의 css 적용 }@media all and (min-width:1025px){ 해상도 1025px 이상 Size의 css 적용 }@media all and (min-width:768px) {
/* 768px 이상 해상도에서 실행할 CSS 코드를 여기에 작성 */
}
@media all and (min-width:768px) and (max-width:1024px) {
/* 768px 이상 1024px 이하 해상도에서 실행할 CSS 코드를 여기에 작성 */
}
@media all and (min-width:1025px) {
/* 1025px 이상 해상도에서 실행할 CSS 코드를 여기에 작성 */
}@charset "utf-8";
/* Bluewave Web Standard Team KKS 130225 */
/* Guide */
#wrapper{with:auto;height:300px;border:1px solid #888;background:#ffd6ef}
/* divice 해상도에 따른 이미지 크기 조정 - 필요할 경우 사용 */
@media screen and (-webkit-min-device-pixel-ratio:1.5){} /* 안드로이드 */
/* Media Query */
@media all and (min-width:800px){
body,input,textarea,select,button,table{font-family:'나눔고딕',NanumGothic,NGW,'돋움',dotum,AppleGothic,sans-serif}
@font-face{font-family:NGW;font-style:normal;font-weight:normal;src:url(../font/NanumGothic.eot);src:local(※),url(../font/NanumGothic.woff) format(woff)}
@font-face{font-family:NGW;font-style:normal;font-weight:bold;src:url(../font/NanumGothicBold.eot);src:local(※),url(../font/NanumGothicBold.woff) format(woff)}
#box_area {width:100%; height:100%; position:relative; border:solid 1px red;}
#box_area span.fr_box {position:absolute; top:20%; left:30%; display:block; width:100px; height:100px; border:solid 1px red; background:red;}
#box_area span.sec_box {position:absolute; top:30%; left:10%;display:block; width:100px; height:100px;border:solid 1px red; background:red;}
#box_area span.las_box {position:absolute; bottom:10%; left:50%;display:block; width:100px; height:100px;border:solid 1px red; background:red;}
}
@media all and (min-width:320px) and (max-width:800px){
#wrapper{width:auto;height:300px;border:1px solid #888;background:#cccbff}
#box_area {width:100%; height:100%; position:relative; border:solid 1px red;}
#box_area span.fr_box {position:absolute; top:10%; left:30%; display:block; width:100px; height:100px; border:solid 1px blue; background:blue;}
#box_area span.sec_box {position:absolute; top:30%; left:60%;display:block; width:100px; height:100px;border:solid 1px blue; background:blue;}
#box_area span.las_box {position:absolute; bottom:10%; left:20%;display:block; width:100px; height:100px;border:solid 1px blue; background:blue;}
}
@media all and (min-width:1025px){
#wrapper{width:1280px;height:300px;margin:0 auto;border:1px solid #888;background:#ebffc9}
}
-----------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="author" content="page">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,target-densitydpi=medium-dpi">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS 미디어쿼리 :: 반응형웹</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/content.css">
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iefont9.css">
<![endif]-->
</head>
<!-- //스킵네비게이션 -->
<div id="wrapper">
<div id="box_area">
<a href="#gnb"><span class="fr_box">메인 메뉴로 바로가기</span></a>
<a href="#snb"><span class="sec_box">하위 메뉴로 바로가기</span></a>
<a href="#content"><span class="las_box">본문으로 바로가기</span></a>
</div>
'CSS' 카테고리의 다른 글
| css 선택자 (0) | 2013.06.28 |
|---|---|
| [모바일]안드로이드에서 주황색 포커스를 없애줌 (0) | 2013.06.07 |
| css3 자주 쓰는 부분 (0) | 2013.06.06 |
