답변 2개
채택된 답변
+20 포인트
Copy
/*
##Device = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
미디어쿼리를 이용하세요
예1 : 화면 사이즈에 따라 각각 보이기
Copy
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
@media (min-width: 1025px} {/* PC */
.pc_div {display:block}
.tablets_div {display:none}
.mo_div {display:none}
}
@media (min-width: 768px) and (max-width: 1024px) { /* 태블릿 */
.pc_div {display:none}
.tablets_div {display:block}
.mo_div {display:none}
}
@media (min-width: 481px) and (max-width: 767px) {/* 태블릿 */
.pc_div {display:none}
.tablets_div {display:block}
.mo_div {display:none}
}
@media (max-width: 480px) { /* 모바일 */
.pc_div {display:none}
.tablets_div {display:none}
.mo_div {display:block}
}
</style>
<div class="pc_div"> PC 화면 일때 <div>
<div class="tablets_div"> 태블릿 화면 일때 <div>
<div class="mo_div"> 모바일 화면 일때 <div>
</body>
</html>
예2: 하나의 코드에서 CSS로 조정하기
Copy
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
@media (min-width: 1025px} {/* PC */
.all_div {display:block; background:#fff000; padding:20px ; color:#000; font-size:20px; }
}
@media (min-width: 768px) and (max-width: 1024px) { /* 태블릿 */
.all_div {display:block; background:#fff000; padding:18px ; color:#ff0000; font-size:18px; }
}
@media (min-width: 481px) and (max-width: 767px) {/* 태블릿 */
.all_div {display:block; background:#fff000; padding:16px ; color:#333; font-size:16px; }
}
@media (max-width: 480px) { /* 모바일 */
.all_div {display:block; background:#000; padding:14px ; color:#fff; font-size:14px; }
}
</style>
<div class="all_div"> 공통 화면 <div>
</body>
</html>
답변을 작성하려면 로그인이 필요합니다.