42. (html/css/javascript/jquery) viewport media 뷰포트 미디어 쿼리 반응형 기본 코드 작성

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <!-- 반응형 뷰 포트를 사용하기 위함 -->
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">




    <!-- 내부 CSS 스타일 지정 -->
    <style>


		/* ============== [가로,세로 뷰 포트 반응형 구조] ============= */		
		*/
		/* 스마트 워치 */
		@media (min-width: 200px), (max-width: 279px) screen and (orientation: portrait) {
		
			
		}
		/* 갤럭시 폴더 */
		@media (min-width: 280px), (max-width: 319px) screen and (orientation: portrait) {
			
			
		}
		/* 갤럭시 J5 */
		@media (min-width: 320px), (max-width: 359px) screen and (orientation: portrait) {
			
			
		}
		/* 갤럭시 Note 10, LG Q9, iPhone */
		@media (min-width: 360px), (max-width: 410px) screen and (orientation: portrait) {
			
			
		}
		/* Pixel2 */
		@media (min-width: 411px), (max-width: 539px) screen and (orientation: portrait) {
			
			
		}
		/* Tab, Surface Duo */
		@media (min-width: 540px), (max-width: 767px) screen and (orientation: portrait) {
			
			
		}
		/* Tablet, iPad */
		@media (min-width: 768px), (max-width: 1200px) screen and (orientation: portrait) {
			
			
		}
		/* PC */
		@media (min-width: 1201px), (max-width: 3000px) screen and (orientation: portrait) {
			
			
		}		
     				                          
    </style>

/* =========================== */

[결과 출력]

​

​[브라우저]

​

​

​[모바일]

/* =========================== */

​

/* =========================== */

[요약 설명]

​

1. viewport : 메타 태그로 반응형 뷰 포트 설정 실시

2. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인

3. min-width : 최소 너비 사이즈

4. min-height : 최소 높이 사이즈

/* =========================== */

​