css 는 서로 다른 해상 도 를 판단 하여 서로 다른 너비 레이아웃 을 표시 하여 자가 적응 폭 을 실현 합 니 다.

링크 옮 기기:http://www.jb51.net/css/151312.html
평가:
CSS 는 서로 다른 해상도 브 라 우 저 (화면 표시) 를 판단 하여 서로 다른 너비 레이아웃 을 표시 합 니 다. CSS 3 기술 은 IE6 에서 IE8 을 지원 합 니 다.css 3 @ media 스타일 로 판단 하지만 IE9 이하 버 전 은 CSS 3 기술 을 지원 하지 않 습 니 다. 여기 DIVCSS 5 는 JS 를 통 해 저 버 전 을 구현 하 는 브 라 우 저 를 소개 하고 CSS 3 를 지원 하여 실 용적 인 레이아웃 을 구현 합 니 다.
CSS DIV 웹 페이지 레이아웃 에서 해상도 가 1024 px (픽 셀) 보다 작 을 때 DIV 레이아웃 대상 은 1000 px 폭 을 표시 하고 해상도 가 1024 px 보다 클 때 1200 px 폭 등 수 요 를 표시 합 니 다.CSS 를 사용 하여 브 라 우 저 디 스 플레이 폭 을 변경 하여 레이아웃 의 웹 페이지 폭 을 동적 으로 변경 합 니 다 (웹 페이지 폭 은 브 라 우 저 디 스 플레이 폭 에 따라 자동 으로 넓 어 지고 좁 아 집 니 다).발전 에 따라 점점 더 많은 컴퓨터 사용자 들 의 디 스 플레이 해상도 가 점점 높 아 지고 있 지만 일부 사용 자 는 1024 px 의 해상도 디 스 플레이 (몇 개의 브 라 우 저 해상도 통계 플랫폼 에 따라 데 이 터 를 얻 을 수 있 습 니 다. 현재 1200 해상도 이하 의 사용 자 는 매우 적 지만 우리 CSS 구 조 는 적어도 1024 px 해상도 사용 자 를 고려 해 야 합 니 다) 를 사용 합 니 다. 만약 에 웹 페이지 의 구조 너비 가 1200 px 로 고정 되면1024 해상도 사용자 가 웹 페이지 를 탐색 할 때 브 라 우 저 아래 에 스크롤 바 가 나타 납 니 다. 이 문 제 를 해결 하기 위해 서 는 CSS 3 스타일 로 사용자 브 라 우 저 폭 을 판단 하여 서로 다른 레이아웃 폭 을 호출 할 수 있 습 니 다.
CSS 단어 와 문법 사용 하기

@media screen and (    ){ CSS      }

여기 괄호 안에 변경 할 CSS 스타일 선택 기 를 설치 하 는 것 을 주의 하 세 요.
3. 서로 다른 해상도 로 서로 다른 너비 스타일 사례 표시
1. DIVCSS 사례 설명 에 따 르 면 우 리 는 먼저 DIV 상자 CSS 를 'abc' 라 고 부 르 고 높이 는 300 px 이 며 css 테 두 리 는 검은색 으로 설정 합 니 다.그리고 margin: 0 auto 레이아웃 을 가운데 로 설정 합 니 다.이 두 스타일 을 미리 설정 한 것 은 관찰 하기 편리 하도록 하기 위해 서 이다.우 리 는 수 동 으로 브 라 우 저 를 끌 어 당 겨 폭 을 표시 한 다음 에 이 상자 의 너비 변화 상황 을 관찰 합 니 다. 브 라 우 저 폭 이 500 px 보다 크 지 않 을 때 이 상자 의 너비 에 대응 하여 100 px 를 표시 합 니 다.브 라 우 저 폭 이 901 px 보다 크 지 않 을 때 'abc' 에 대응 하 는 상자 폭 을 200 px 로 표시 합 니 다.브 라 우 저의 폭 이 1201 px 보다 클 때 상자 의 대상 폭 은 1200 px 를 표시 합 니 다.1200 px 보다 작 을 때 폭 을 900 px 로 표시 합 니 다.
2. CSS 코드

.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css  ：           1201px  abc   1200px   */

@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/*            1200px  abc   900px   */

@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/*            901px  abc   200px   */

@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/*            500px  abc   100px   */ 

주의해 야 할 것 은 CSS 코드 순서 입 니 다. 크 고 작은 레이아웃 CSS (브 라 우 저 너비 가 클 수록 앞 에 놓 인 다 고 판단) 는 논리 적 관계 때 문 입 니 다. @ media 는 CSS 의 오 류 를 판단 하면 판단 이 실 효 됩 니 다.
3. HTML 코드

DIVCSS5  ：   DIV            ，         

 

4. IE9 이하 버 전의 브 라 우 저 를 호 환 하기 위해 구 글 의 JS 를 추가 해 야 합 니 다. 물론 html 를 다운로드 할 수 있 습 니 다.

JS 코드 를 탭 에 넣 기 전에 구 글 온라인 JS 를 직접 인용 할 수 있 습 니 다. 이 JS 파일 을 다운로드 하여 다시 HTML 인용 하면 됩 니 다.
5, 완벽 하 게 호 환 각 브 라 우 저 HTML + CSS + JS 소스 코드

DIVCSS5  ：   DIV            ，