미디어 쿼리
뷰포트의 해상도에 따라 css를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다.
01. <link ~ media - "">
< link rel = "stylesheet" type = "text/css" media="all" and (min-wigth : 1000px): href = "style_pc.css" >
최소 가로폭아 1000px, 즉 1000px보다 넓은 해상도일때 style_pc.css를 연결한다는 뜻이다.
또한 아래는 트로이에서 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다.
| 모바일 기기 | 가로 | 세로 |
|---|---|---|
| iPhone X | 375 | 812 |
| iPhone 6,7,8 | 375 | 667 |
| iPhone 6,7,8 plus | 414 | 736 |
| iPhone 5 | 320 | 568 |
| Galaxy S5, S8 | 360 | 640 |
| Galaxy Note 8 | 360 | 640 |
| IPad pro | 1024 | 1366 |
02. @media
css 내부에서 조건에 따라 분기시키는 일반적인 형태의 반응형 웹 CSS입니다.
@media all and (min-width : 1000px){
모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들 . . .
}
| Media Type/th> | 설명 |
|---|---|
| all | 모든 미디어 장치에 사용(기본값) |
| 프린터에 사용 | |
| screen | Pc, 태블릿, 스마트폰에 사용 |
| speech | 스크린리더기가 페이지를 읽는데 사용 |
예제
미디어쿼리를 이용하여 브라우저의 방향에 따라 다른 레이아웃을 정리해보겠습니다.
01. 모바일 기기를 세워 세로가 가로 보다 긴 세로방향이 되면 바뀌는 반응형웹
@media only screen and (orientation : protrait ){
body { background : skyblue; }
}
02. 모바일 기기를 눕혀 거로가 세로보다 긴 가로방향이 되면 바뀌는 반응형웹
@media only screen and (orientation : landscape ){
body { background : lightgreen; }
}
03. 가로기 600px 에서 900px 사이일때, 그리고 1100px 이상일 때에만 글자색을 바꾸는 반응형웹
@media only screen and (max -wigth : 900px) and (min=width : 600px),(min=width : 1100px){
body { color : red;}
}
03. 반응형 레이아웃
아래는 반응형 웹 레이아웃 예시 입니다. 레이아웃에 보통은 % 으로 넓이를 작업합니다, 그리고 float , flex , grid인 css를 사용합니다
04. media query를 흉내내는 script
function initLayout(){
var widthwin = $(window).width();
if (widthwin < 1000) $('body').addClass('mob').removeClass('pc');
else $('body').removeClass('mob').addClass('pc');
}
창의 가로 크기를 재고 1000px 보다 좁으면 body에 mob클래스를 붙이고 pc 클래스를 제거하고, 1000px이상이면 body에 pc 클래스를 붙이고, mob 클래스를 제거한다는 뜻입니다.
$(window).resize(function(){
initLayout();
});
미리 만들어 둔 스크립트를 창 크기가 바뀔 때마다 실행합니다.
body.mob (max-width : 720px;)
css에서 body,mob에 속성을 추가하면 모바일일 때의 속성이 등록되는 뜻입니다.
댓글