에서 재판 https://www.cnblogs.com/eyed/p/7872521.html

---- HTML5의 반응 (적응) 웹 디자인

지금, 많은 프로젝트는 반응 또는 적응은 휴대 전화, 컴퓨터 및 기타 장비의 우리의 서로 다른 화면 크기를 수용 할 수 있도록 할 필요가있다, 그래서 우리는 여기의 나는 응답 (적응을) 할 것 어떻게 페이지에서 열심히 일해야 할 웹 디자인

1, 헤드 페이지 코드, 라인 뷰포트 메타 태그를 추가

　　<메타 이름 = "뷰포트"내용 = "= 폭 소자 폭 초기 스케일 = 1.0, 최대 스케일 = 1.0, 최소 크기 = 1.0, 사용자 확장 = 아니오">

페이지의 <head>보다 더 많은 단어를 증가 페이지의 폭이 자동으로 모바일 화면의 폭에 적응하자, 다음은 이러한 특성에 대한 설명입니다 :

　　1) 폭 = 기기 폭 : 폭은 스크린 장치의 폭을 나타낸다

　　2) 초기 스케일 = 1.0 : 초기 스케일링을 나타내고, 1.0 페이지 100 %

　　3) 최소 크기 = 1.0 : 최소 배율을 나타낸다

　　4) 최대 스케일 = 1.0 : 최대 크기를 나타낸다

　　5) 사용자 확장 성이 = 더 : 사용자는 줌을 조정할 수 있는지 여부를 나타냅니다

당신이 IE6 / 7/8 다음, 호환 할 경우에 필요하다 CSS3 - mediaqueries.js

 
               <!--[ 
               if  
               lt IE 9]>  
              
               　　　　<script src= 
               "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" 
               ></script>  
              
               <![endif]-->

2 절대 폭을 사용하지

　　폭 : 자동; / 폭 : XX %의;

(3)는 디폴트 폰트 크기는 "REM"의 상대적인 크기를 사용하려면, "PX"의 절대 크기를 사용하지 않는, 즉, 16 개 화소이며, 100 %의 페이지 사이즈

　물론, 스타일은 미디어 쿼리와 같은 더 잘 될 것입니다

그러나, PC 측의 경우, 바람직하게는 최소 폭 장치 및 최대 폭 기기와 이동 단부에서 바람직하게는 최소 폭을 최대 폭과

도 4에서, 흐름의 레이아웃은 "유동 분포"는 각 블록의 위치가 고정되지 부동 것을 의미

　따라서, 좌우의 폭은 두 개의 요소에 맞게, 너무 작은 경우, 후자의 원소가 자동 수평 방향 의지하지 플로우 (플로우)에, 전방 요소의 하단에 스크롤되어, 이득 부동 부동 수평 이동을 방지 할 외관에

5, CSS를로드 선택

코어 "RWD는", CSS3 미디어 쿼리 모듈의 도입이다. 자동 화면의 폭을 검출 한 다음 적절한 CSS 파일을로드

 
               < 
               link  
               rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />

　이 코드의 의미 것은 : 파일 css600.css로드 : 화면 폭 미만 600 개 픽셀 (600PX 최대 폭 기기) 인 경우.

화소 (600)의 스크린의 폭이 980 화소 경우 파일이로드는 css600-980.css

 
               < 
               link  
               rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />

(권장하지 않음)이 있습니다 HTML 태그와로드 CSS 파일뿐만 아니라, 당신은 또한 기존의 CSS 파일을로드 할 수 있습니다

 
               @import  
               url 
               ( 
               "css600.css" 
               )  
               screen  
               and (max-device- 
               width 
               :  
               600px 
               );

(6)의 CSS의 @media 규칙 (쓰기 할 필요가있는 경우)

 
               @media  
               screen  
               and (max-device- 
               width 
               :  
               400px 
               ) {  . 
               left 
               {  
               float 
               : 
               none 
               ;} }

　화면 폭이 400 픽셀보다 작은 경우, 취소 부동

7, 그림 적응 "RWD는"또한 자동 이미지 스케일링을 구현해야합니다.

　윈도우 플랫폼은 이미지 크기를 조정하면 이미지 왜곡이 표시 될 수 있습니다. 이 경우, 독점 명령 IE를 사용해보십시오

 
               img {  
               width 
               : 
               100% 
               ; -ms-interpolation-mode: bicubic;}

　또는 JS를 사용 - imgSizer.js을　

 
               addLoadEvent(function() {  
              
               　　var imgs = document.getElementById( 
               "content" 
               ).getElementsByTagName( 
               "img" 
               );  
              
               　　imgSizer.collate(imgs);  
              
               });

음,이 페이지는 적응을 쓸 것이다!　　