반응형 웹 스타일 시트, 브라우저의 너비에 따른 스타일 시트, 모바일 디바이스에 맞춰 반응형 웹 페이지 설정
CODEDRAGON ㆍDevelopment/Web, WWW
반응형
반응형 웹 스타일 시트
화면에 나타나는 브라우저의 너비를 이용하여 스타일을 다르게 표시해 주었으며 이 방식이 반응형 웹 개념으로 발전하였습니다.
브라우저의 너비에 따른 스타일 시트
|
구분 |
CSS |
|
스마트 폰
|
@media (max-width:799px) |
|
태블릿 |
@media only screen and (min-width:800px) and (max-width:1023px) |
|
데스크탑 |
@media only screen and (min-width:1024px) |
모바일 디바이스에 맞춰 반응형 웹 페이지 설정
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
반응형
'Development > Web, WWW' 카테고리의 다른 글
| 위치 정보를 연속해서 얻기, watchPosition 메서드에 설정하는 옵션값, 실시간 감시의 정지 (0) | 2017.06.30 |
|---|---|
| 시맨틱 웹 HTML 작업, 시맨틱 웹 모바일 스타일링-미디어 쿼리 제작, 공통 스타일 시트 별도 제작, 상속 기능 활용 (0) | 2017.06.30 |
| 미디어 쿼리 구문, 미디어 쿼리의 종류, 디바이스, 연산자, 속성 값, 가로와 세로의 너비 조정 예 (0) | 2017.06.30 |
| Responsive Web(반응형 웹), Responsive Web 장점 (0) | 2017.06.30 |
| W3C Media Queries - W3C 미디어 쿼리 모듈 스펙 (0) | 2017.06.30 |