728x90
728x90
viewport
IOS에서 페이지를 표시할 때 사용했던 단위. 이제 두루두루 쓰임. 간혹 익스플로러 중에 안되는 경우 대체 코드 :
<head>
<style>
@-ms-viewport {width: device-width;}
@o-viewport {width: device-width;}
@viewport {width: device-width;}
</style>
</head>
* 너비를 장치너비로 설정
디바이스의 해상도가 아닌 실제 크기를 기준으로 너비, 높이를 잡기
<meta name="viewport" content="width=device-width">
* 높이를 장치높이로 설정
<meta name="viewport" content="height=device-height">
* 초기 화면 배율 설정 (zoom 레벨 설정)
<meta name="viewport" content="width=device-width, initial-scale=1">
* 최소/최대 화면 스케일 설정
각각 극단적 화면 축소, 확대를 방지한다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
* 사용자의 크기 조절 막기
<meta name="viewport" content="user-scalable=no, width=device-width">
디바이스별 해상도 반응형 분기점
* 4가지, 3가지 분류로 나눴을 때
/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) { /*스타일입력*/}
/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) { /*스타일입력*/}/* PC (해상도 1024px)*/
@media all and (min-width:1024px) { /*스타일입력*/}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { /*스타일입력*/}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) { /*스타일입력*/}
* 미디어쿼리 적용법
@media only|not screen and (min-width: 152px) and (max-width: 1024px) { ... }
only : 뒤의 조건만 / not : 뒤의 조건을 제외한 조건
미디어쿼리를 지원하는 브라우저 대상으로 쿼리 안의 내용이 적용됩니다.
-- 미디어 타입의 종류
- all : 모든 미디어타입
- aural : 음성 합성장치
- braille : 점자 표시 장치
- handheld :
* 미디어쿼리 적용법
<link href="xxx.css" media="screen and (min-width: 152px) and (max-width: 1024px)" rel="stylesheet"><style type="text/css" media="screen and (min-width: 152px) and (max-width: 1024px)"</style><style>
@import url(xxx.css) screen and (min-width: 152px) and (max-width: 1024px);
</style>/* css 파일 안이나 style 태그 안에서 */
@media screen and (min-width: 152px) and (max-width: 1024px)
출처 및 참조하면 좋을 곳들
benfrain.com/understanding-the-viewport-meta-tag-and-css-viewport/
728x90
728x90
'Javascript' 카테고리의 다른 글
| 마우스로 드래그한 텍스트 가져오기 (0) | 2021.06.14 |
|---|---|
| window.open 후 자식창에서 자식창의 함수 실행 (0) | 2021.06.03 |
| 큐 (0) | 2021.03.17 |
| 스택으로 뒤로가기/앞으로가기 (0) | 2021.03.16 |
| [JS] substr() (0) | 2021.03.11 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
