[css] @media query(미디어 쿼리)와 screen 크기

[CSS] 2017. 1. 2. 21:40

@media query(미디어 쿼리)와 screen(화면) 크기

우리는 인터넷을 하나의 화면에서만 사용하지 않는다. 여러 화면에서 정보를 예를 들어 아래의 세 가지의 화면을 보자. 화면의 크기에 따라 네모 안에 있는 부분의 변화가 있다. 아마 티스토리를 반응형을 사용하시는 분들이라면 이 기능이 비슷하게 가지고 계실 것입니다.

1. 일반적 모니터 화면

2. (예를 들어) 태블릿 화면

2. 모바일 화면

뭐... 여기서 더 들어가볼까요?

우리가 잘 알고 있는 다음과 네이버는 각각 모바일용(m.daum.net, m.naver.com)과 일반(naver.com ,daum.net)이 각각 URL을 통해서 redirect를 통해 유지하고 있지만, 비용과 모바일용을 재구축한다는 점에서 시간이 들어간다는 점을 해결하기 위해서 스크린의 크기에 따른 대응을 통한 반응형을 구축한다는 점의 경제적인 면에서 대단히 효율적이다.

그래서 화면의 크기에 따른 기초적인 것을 설명하고자 합니다.

(설명글 쓰끼 너무 힘들어요…. 내용은 많이 빈약한 거 많이 알아요…. ㅠㅠ)

그리고 들어가기전에 IE8(익스플로어 8 이하 부터는 @media query 적용되지 않습니다.

IE8 이하에서는 추가적으로 script를 추가하여서 어느 정도 @media 쿼리를 사용할 수 있습니다.

1. https://code.google.com/archive/p/css3-mediaqueries-js/ 를 통해서 css3-mediaqueries.js 직접 추가

<script src="js/css3-mediaqueries.js"></script>

2. src를 통한 연결을 css3-mediaqueries.js과 연결

이렇게 추가하시면 IE6, IE5에서 어느 정도 작동한다고 하네요.

아래에 소스코드를 통해서 가로의 화면 크기 변화에 따른 배경화면을 봐꿔 보겠습니다.

(그리고, 전체 소스 코드에서 body 부분 주석을 해제 후 사용해주세요.)

그리고, JS 파일은 화면의 크기를 알아낼 수 있는 코드입니다.

<!DOCTYPE html>

<head>
<style>
body {
    background-color: lightblue;
    text-align:center;
}

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
@media screen and (min-width: 800px) {
    body {
        background-color: yellow;
    }
}
</style>
 <script type="text/javascript">
	function getDisplayInfo() {
		var size = {
		 width: window.innerWidth || document.body.clientWidth,
		 height: window.innerHeight || document.body.clientHeight
		}
		var w = document.getElementById("dispWidth");
		var h = document.getElementById("dispHeight");
        if(w != document.getElementById("dispWidth"))
			w.innerHTML = size.width;		
        w.innerHTML = size.width;
		h.innerHTML = size.height;

}
	window.onload = getDisplayInfo;
  </script>
</head>
<!--body onresize="getDisplayInfo()" text-align:center--!>
<h1>화면의 가로를 움직여보세요</h1>
  <div><b>w: <span id="dispWidth">widht</span>px / h: <span id="dispHeight">height</span>px</b></div>
<p>가로의 넓이에 따라 바탕화면 배경색이 달라집니다.</p>
<!--/body--!>

See the Pen @media - onresize by Nami (@NamuNami) on CodePen.

'[CSS]' 카테고리의 다른 글

[css] 바운스(Bounce ) 효과 만들기 (0)	2019.04.30
크롬 자동재생 방어,막기 없애버리기 ( + 보너스 유튜브(youtube) api 사용기) (0)	2018.05.03
[css] font-family 속성 (0)	2016.12.29
[css] :before :after (0)	2016.12.28

미나미나미