창크기가 최소 1025px 이상일때 / 최소 768px ~ 1024px까지 / 최대 767px
창크기가 최소 1025px이상 일때
반응형 홈페이지를 만들때는 꼭 이걸 기본으로 참고하면서 사이즈에 맞게 코딩하면 된다.
@media all and (min-width:1025px) {
body{background-color:yellow}
}
최소 768px ~ 1024px까지 일때
@media all and (min-width:768px) and (max-width:1024px) {
body{background-color:red}
}
최대 767px이하 일때
@media all and (max-width:767px) {
body{background-color:green}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html창크기별 CSS설정</title>
<style>
/**창크기가 최소 1025px 이상일때**/
@media all and (min-width:1025px) {
body{background-color:yellow;}
}
/**최소 768px ~ 1024px 까지 **/
@media all and (min-width:768px) and (max-width:1024px) {
body{background-color:red;}
}
/**최대 767px 아래**/
@media all and (max-width:767px) {
body{background-color:green;}
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1025_up">창크기가 최소 1025px 이상일때 - yellow </div>
<div class="box768_1024">최소 768 ~ 1024까지 - red </div>
<div class="box767_down">최대 767 - green </div>
<div class="box">일반</div>
</div>
</body>
</html>
css
.wrap{overflow:hidden} /* float 해제용 */
.box{float:left;width:50%} /* abcd 의 박스 크기가는 50% + float left */
@media all and (max-width:767px) { /* 창크기가 767 보다 작은경우 작동 */
.box{width:100%} /* width:100% 한가지만 써있지만 위에 써있는부분 상속 받습니다. 기존에 50% 인거 100% 다시 적용 시킴 */
}
※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※
[홈페이지만들기] - first-child / last-child 활용하기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| vertical-align와 text-align CSS 활용하여 정렬하기 (2) | 2017.02.03 |
|---|---|
| html 순서 및 목록 만들기 (2) | 2017.02.02 |
| ul li 가로정렬로 메뉴만들기 (css가로정렬) (5) | 2017.01.27 |
| div 프레임나누기 (2) | 2017.01.25 |
| div 배치하기 (0) | 2017.01.24 |
