Html&CSS/html5&css3
0304_html5/css3_media-1
.Epona.
2020. 3. 5. 09:14
반드시 있어야 모바일, 반응형 작업을 할 수 있음
페이지 크기와
device-width : 장치의 화면 폭에 따라 화면 페이지 폭을 설정 하겠따
initial-scale=1 : 초기 zoom값
minimum-scale= : 최대 값 지정
user-scaleble = :사용자가 확대/축소를 할 수 있게 할 것인가
---
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0304_css3_media-1</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1"><!--head 안에만 들어가 있으면 됨/미디어 스크린 ? 할려면 꼭 있어야 함 -->
<style>
/*조건1 (기본값, 이상 일때, )*/
.wrap_1{
width: 100%; height: 150px; background-color: yellow
}
@media all and (min-width:768px){/*띄어쓰기 정확해야 함. all 혹은 screen 써도 됨*/
.wrap_1{
width: 100%; height: 150px; background-color: green
}/*768이상일때 green으로 바뀜 */
}
/*조건 타입:2 [and] (and) (최대, 최소 범위 지정: 정확히 범위의 값 안에 들어갔을 때)*/
.wrap_2{width: 100%; height: 150px; background-color: yellow
}
@media all and (min-width:768px) and (max-width:1024px){
.wrap_2{width: 100%; height: 150px; background-color: green
}
}
/*조건 타입:3 [or] ( , )*/
/*min- , max-써서 범위값(이상, 이하)을 지정해서 하는 작업을 더 많이 함*/
.wrap_3{width: 100%; height: 150px; background-color: yellow
}
@media all and (width:768px) , (width:1024px){
.wrap_3{width: 100%; height: 150px; background-color: green
}
}
/*조건 타입4:디바이스 크기 */
.wrap_4{width: 100%; height: 150px; background-color: yellow
}
@media all and (device-width:320px) and (device-height:568px){
.wrap_4{width: 100%; height: 150px; background-color: green
}/*그리고 높이가 568이면 배경의 색상을 초록색으로 바꿈. 조건에 만족하지 않을때는 노란색(*/
}
/*조건 타입5:디바이스 가로/세로 모드*/
.wrap_5{width: 100%; height: 150px; background-color: yellow
}
@media all and (orientation:portrait){
.wrap_5{width: 100%; height: 150px; background-color: green
}
</style>
</head>
<body>
<!--조건 타입:1-->
<div class="wrap_1">
@media all and(min-width:768px){
사용자 해상도가 768px 이상일 때, 이 안에 있는 코드가 실행 됨
}
</div>
<!--조건 타입:2 [and] (and)-->
<div class="wrap_2">
(and:그리고 , 두가지 조건이 모두 만족할때)
@media all and(min-width:768px) and (max-width:1024px){
사용자의 해상도가 768이상이고 1024이하일 때 코드가 실행 됨
}
</div>
<!--조건 타입:3 [or] ( , )-->
<div class="wrap_3">
<!--@media all and(min-width:768px), (max-width:1024px){
사용자의 해상도가 768이상이거나 ',' 또는 1024이하일 때 코드가 실행 됨
-->
@media all and(width:768px), (width:1024px){
사용자의 뷰포트가 768이거나 ',' 또는 1024일 때 코드가 실행 됨
}
</div>
<!--조건 타입4:디바이스 크기 -->
<div class="wrap_4">
<!--min-device-width :스크린 최소값/ min-device-height 넣어도 되고 안넣어도 되고 -->
@media all and(device-width:320px) and (device-height:568px){
스크린 너비가 320px 그리고 높이가 568px이면 코드가 실행 됨
}
</div>
<!--조건 타입5:디바이스 가로/세로 모드 -->
<div class="wrap_5">
@media all and(orientation:portrait){
<!--orientation:portrait :: 세로 모드
/orientation:landscape::가로모드-->
}
</div>
</body>
</html>
EX_html5_0304_media-1.html
0.00MB
EX_html5_0304_media-2.html
0.00MB