반응형웹 핵심속성 요약
핵심속성요소1
가변적인 그리드 기반의 레이아웃
| Target÷Context=Result
비례와 퍼센트 시스템으로 픽셀을 사용하지않고도 사이트 제작 |
디자인된 파일을 감싸고 있는 레이아웃의 크기를 사용하고자 하는 컨텍스트 사이즈로 나눈 결과값을
em, % 사이즈로 적용해 유동적인 사이즈로 만든다
핵심속성요소2
가변적인 이미지와 미디어
|
max-width:100% 파이어폭스2.0/IE7.0이하 AlphaimageLoader → IE에서 이미지 렌더링 품질 향상 |
이미지와 미디어들도 감싸고 있는 그리드에 맞게 max-width:100% 넣어줍니다
파이어폭스2.0과 익스플로7.0이하에서는 CSS필터 중 하나인 알파이미지로더를 사용해 다른 브라우저와 동등한 수준의 효과를 줍니다
핵심속성요소3
미디어쿼리
|
장치특성에 따라 브라우저가 해석해야할 CSS 코드를 분기처리하는 규칙 → IE8이하 사용 불가 |
반응형 웹사이트란 가변 그리드에서 고정되지않는 가변레이아웃위에 미디어쿼리를 얹어서 제작하는 것을 말한다
반응형웹의 문제점
문제점1 : 모바일 해상도 감지못함
문제해결1 : 모바일 뷰포트 설정
<meta
name="viewport"
content="
width=device-sidth,
initial-scale=1,
minimum-scale=1,
maximum-scale=2,
user-scalable=yes"
/>"
문제점2 : IE8이하 미디어쿼리 지원안함
문제해결2 : respond.min.js파일
<head>
<!--[if it IE 9]>
<script src="respond.min.js"></script>
<!--[endif]-->
</head>
문제점3 : 방대한 콘텐츠와 자바스크립트로 인한 성능문제
문제해결3 : 데스크톱, 모바일/타블렛용 사이트 분리