Responsive Design 응답 식 사이트 디자인 소감 노트

이 단 어 는 이미 오랫동안 소 리 를 질 렀 고,줄곧 소란 을 피 우 며,진지 하 게 큰 호응 식 전 역 을 한 적 이 없 는데,이번에 마침내 기회 가 생 겼 다.사이트 가 출시 된 지 보름 만 에 응답 식 디자인 으로 바 꾸 고 핸드폰/PC 등 각종 단말기 디 스 플레이 탐색 을 지원 해 야 한다.오늘 첫 페이지 를 잘 만 들 고 테스트 를 잘 해 보 세 요.여기에 기록 해 야 할 것들 을 적어 보 세 요.하 나 는 메모 이 고,다른 하 나 는 필요 한 사람 에 게 공유 하 는 것 입 니 다.
1.html 5 탭 이 지원 되 지 않 는 IE 는 html 5 shiv 와 같은 플러그 인(주소)을 사용 할 수 있 습 니 다.http://html5shim.googlecode.com/svn/trunk/html5.js)javascript 의 createElement 를 사용 하여 지원 되 지 않 는 탭 을 만 들 수도 있 습 니 다.CSS 에서 이 Html 5 탭 을 block 형식 으로 대량으로 설명 하 는 것 을 기억 하 십시오.일부 경우 IE 가 html 5 태그 의 CSS 스타일 을 인식 하지 못 하 는 것 을 방지 합 니 다.
2.응답 식 디자인 은 가능 한 한 백분율 폭 을 사용 하여 서로 다른 장치 의 디 스 플레이 수요 에 적응 해 야 한다.글꼴 크기 에 대해 서 는 작은 화면 핸드폰 장치 에 media query 를 쓸 때 편리 하 게 유지 하기 위해 픽 셀 단위 px 와 결합 하여 상대 단 위 를 적 절 히 사용 하 십시오.CSS 3 에 추 가 된 상대 단위 remi(root em)는 유연 하고 편리 하지만 IE8 과 이전 저 버 전 은 지원 되 지 않 기 때문에 현재 로 서 는 em 을 사용 하 는 것 을 권장 합 니 다.사용 하 는 곳 은 스스로 번 거 로 움 을 두려워 하지 마 십시오.많이 계산 해 봐.
3.IE 가 미디어 장치 조 회 를 지원 하도록 하면 MediaQueries.js 와 Responsd.js 를 사용 할 수 있 습 니 다.물론 시간 과 능력 이 있 으 면 직접 쓰 면 더욱 목적 성 이 있 습 니 다.MediaQueries.js 를 사용 할 때 구조 가 약간 복잡 하거나 포 지 셔 닝 position 를 잘못 사용 하면 IE 에서 효력 이 발생 하지 않 거나 문제 가 나타 날 수 있 습 니 다.이 럴 때 다음 과 같은 방법 으로 확인 해 보 세 요.
1)로 컬 페이지 관련 파일 을 서버 에 업로드 하고 테스트 미리 보기 합 니 다.
2)position:relative 로 설정 한 경우 body 요 소 를 포 지 셔 닝 합 니 다.이 방법 은 일부 정상 적 인 페이지 가 미디어 queries.js 를 추가 한 후에 오히려 어 지 러 운 문 제 를 해결 할 수 있 습 니 다.예 를 들 어 가장 자주 발생 하 는 IE7 의 일부 요 소 는 화이트 보드 로 표시 되 어 선택 할 수 없습니다.
4.png 24 와 png 8 그림 형식 에 대한 질문 입 니 다.반투명 효과 가 있 으 면 png 24 를 선택 하면 당연히 톱니 에 저항 하고 이미지 품질 이 가장 보장 되 지만 머리 가 아 픈 IE6 를 따로 처리 해 야 합 니 다.이 는 페이지 에 관련 된 요소 가 얼마나 되 는 지 를 보고 그림 크기,페이지 크기,로드 성능 을 종합 하여 PNG 24 를 사용 하 는 지 여 부 를 종합 적 으로 고려 해 야 합 니 다.제 제안 은 png 8 그림 을 통 해 가능 한 한 png 8 그림 을 사용 하고 필요 할 때 잡 변(PhontShop 저장 시 옵션)을 추가 할 수 있 습 니 다.부득이 할 경우 png 24 를 사용 해 야 사용 할 수 있 습 니 다.IE6 에서 PNG 24 의 처 리 는 유사 한jquery.pngFix.pack.js플러그 인 을 사용 할 수도 있 고 IE 의 개인 필 터 를 사용 할 수도 있 습 니 다.filter:AlphaImageLoader 필 터 를 사용 하 는 층 은 반드시 hasLayout 이 어야 합 니 다.그렇지 않 으 면 투명 필터 효 과 를 표시 할 수 없습니다.개인 필터 가 페이지 의 성능 에 영향 을 미 칠 수 있 으 니 조심 하 세 요.
쓰기 용례 는 다음 과 같다.
 

#logo_top{display:block; float:left; width: 295px; height: 39px; background: url("../images/logo_top.png") no-repeat 0 0; 

_background:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled='true', sizingMethod='scale', src='../static/images/logo_top.png');

}

그림 경 로 는 html 페이지 에 비해 css 파일 이 아 닙 니 다.또한 IE6 전용 밑줄 hack 을 사용 하여 IE6 에 CSS background 를 제거 해 야 IE7+의 성능 에 영향 을 주지 않 고 페이지 가 너무 무 거 워 가사 현상 이 발생 하 는 것 을 방지 할 수 있 습 니 다.
 
 
IE 개인 필터 의 문법 을 다시 한 번 복습 합 니 다.
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=
bEnabled
, sizingMethod=
sSize
, src=
sURL
)
속성:
enabled
:
옵션 가능.불 값(Boolean).필터 가 활성화 되 었 는 지 설정 하거나 검색 합 니 다.true | false
true
:
기본 값.필터 활성화.
false
:
필터 가 금지 되다.
sizingMethod
:
옵션 가능.문자열(String).필터 역할 을 하 는 대상 의 그림 을 대상 용기 경계 에 표시 하거나 검색 합 니 다.
crop
:
대상 사이즈 에 맞 게 그림 을 자 릅 니 다.
image
:
기본 값.그림 의 크기 에 맞 게 대상 의 크기 경 계 를 늘 리 거나 줄 입 니 다.
scale
:
대상 의 크기 경계 에 맞 게 그림 크기 를 조정 합 니 다.
src
:
필수 옵션.문자열(String).절대 또는 상대 url 주소 로 배경 그림 을 지정 합 니 다.이 인 자 를 무시 하면 필터 가 작 동 하지 않 습 니 다.
특성:
Enabled
:
읽 기와 쓰기.불 값(Boolean).enabled 속성 참조.
sizingMethod
:
읽 기와 쓰기.문자열(String).sizingMethod 속성 참조.
src
:
읽 기와 쓰기.문자열(String).src 속성 참조.
설명:
대상 용기 경계 에 대상 의 배경 과 내용 사이 에 그림 을 표시 합 니 다.이 그림 을 자 르 고 사 이 즈 를 바 꾸 는 동작 을 제공 합 니 다.PNG(Portable Network Graphics)형식 으로 불 러 오 면 0%-100%투명도 가 제 공 됩 니 다.
PNG(Portable Network Graphics)형식의 그림 의 투명 도 는 텍스트 선택 에 방해 가 되 지 않 습 니 다.PNG(Portable Network Graphics)형식의 그림 완전 투명 영역 뒤에 표 시 된 내용 을 선택 할 수 있다 는 것 이다.
예시:
#idDiv{position:absolute; left:140px;height:400;width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');}
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}
MSDN:
http://msdn2.microsoft.com/en-us/library/ms532969.aspx
 
P.S.backgroundimage 속성 을 사용 하려 면 그림 의 원래 크기 를 표시 하지 않 고 IMG width=100%heigth=100%와 유사 한 효 과 를 내 려 면 이 filter 를 통 해 구현 할 수 있 습 니 다.
Example： span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";
이상 은 공식 적 인 설명 입 니 다.사실 실제 작업 에서 주의해 야 할 것 은 AlphaImageLoader 필 터 는 이 지역 의 링크 와 단 추 를 무효 로 할 수 있 습 니 다.일반적인 해결 방법 은 링크 나 단 추 를 추가 하 는 것 입 니 다.position:relative 는 상대 적 으로 움 직 입 니 다.주의해 야 할 것 은 필 터 를 불 러 오 는 영역의 부모 층 에 position:absolute 절대 위치 가 있 을 때 position:relative 를 사용 해도 링크 를 복원 할 수 없습니다.유동 방법 으로 처리 할 것 을 건의 하 다.
IE 개인 필 터 를 사용 하 는 장단 점 은 어 떻 습 니까?
장점:1.녹색 플러그 인 없 음;2.플러그 인 에 비해 효율 이 높다.3.네트워크 속도 가 느 릴 때 먼저 회색 바닥 이 투명 한 상황 이 나타 나 지 않 고 원 격 그림 을 지원 합 니 다.4.Hover 등 위 류 를 지원 하지만 두 장의 그림 을 사용 해 야 합 니 다.인터넷 속도 가 느 린 경우 두 번 째 그림 을 표시 할 수 없습니다.아직 완전히 불 러 오지 않 았 기 때 문 입 니 다.
단점:1.평 포 는 지원 되 지 않 습 니 다.filter 는 sizing Method="scale",스 트 레 칭 모드 가 있 지만 그림 은 변 형 됩 니 다.단순 한 색상 이나 간단 한 그 라 데 이 션 색 이 있 으 면 가로로 평평 하 게 깔 수 있 습 니 다.2.Img 태그 가 지원 되 지 않 습 니 다.CSS background 에 만 적 을 수 있 습 니 다.3.CSS Sprite 를 지원 하지 않 습 니 다.페이지 그림 이 많 으 면 요청 횟수 가 증가 합 니 다.4.AlphaImageLoader 는 느 리 고 더 많은 메모리 가 필요 합 니 다.대량으로 사용 하면 페이지 의 성능 이 심각하게 떨 어 질 수 있 습 니 다.메모리 소모 측정ProcessExplorer.
오늘 은 너무 늦 어서 퇴근 해서 밥 먹 으 러 가 야 겠 다.오늘 은 이렇게 많이 썼 는데,아직 전면적 인 문 제 는 말 하지 않 은 것 같 으 니,다음 에 이어서 말 하 자.
추천 글 읽 기:
사진 최적화 제5 장:AlphaImageLoader http://s5s5.me/2286
Microsoft CSS Vendor Extensions http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
IE6 최종 메모:IE6 하 25+Bugs 복구   http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2965546