정적 페이지를 반응 적으로 만드는 방법 ??

Question

나는 반응이 좋은 HTML 파일을 만들기 위해 매듭을 짓고 있는데, 너비를 90 %로 변경하면 웹 페이지가 만들어지고 포트폴리오 구분이 맨 오른쪽으로 이동하고 콘텐츠 섹션이 섹션 사이의 간격으로 가장 왼쪽으로 이동하게됩니다. aima가하려고하는 것은 웹 페이지를 고칠 수있게 만드는 것입니까? 나는 5 월 정적 페이지에 대한 JS를 바이올린 링크를 추가 http://jsfiddle.net/aElnajjar/YJA9E/

내가 persent

@@ -1,7 +1,7 @@ 
@charset "utf-8"; 
/* CSS Document */ 

- 
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } 
/*reset css*/ 
article, aside, figure, footer, header, hgroup, nav, section { 
     display:block; 
@@ -17,6 +17,8 @@ article, aside, figure, footer, header, hgroup, nav, section { 
     line-height: 20px; 
     color: #5F5E59; 
     background: url(images/bg_body.jpg) left top repeat; 
+  width: 100%; 
+ 

    } 
    a:link, a:active, a:visited { 
@@ -35,28 +37,26 @@ article, aside, figure, footer, header, hgroup, nav, section { 
     margin-bottom: 25px; 
    } 
    #block-twitter { 
-  width: 700px; 
-  height: 60px; 
-  position: relative; 
+  width: 90%; 
     margin: 0 auto; 
     padding: 20px 200px 0 0; 
+  float: right; 
+  
    } 
    #block-title { 
-  width: 900px; 
-  height: 80px; 
-  position: relative; 
-  margin: 0 auto; 
+  width: 90%; 
+  position: right; 
     padding-top: 25px; 
    } 
    #main-content { 
-  width: 900px; 
-  position: relative; 
+  width: 90%; 
+  position: right; 
     margin: 0 auto; 
    } 
    footer { 
-  width: 900px; 
-  position: relative; 
-  margin: 0 auto; 
+  width: 90%; 
+ 
+ 
     clear: both; 
     padding: 30px 0; 
     background: url(images/img_star.png) left top repeat-x; 
@@ -73,6 +73,8 @@ article, aside, figure, footer, header, hgroup, nav, section { 
    font-style:italic; 
    font-size:14px; 
    text-shadow: 0 -1px 0 #0000; 
+ width: 90%; 
+ 
} 

#block-twitter span.tweet-time { 
@@ -301,6 +303,4 @@ section#portfolio { 
     box-shadow: 1px 1px 2px #999; 
     clear: both; 

- } 
- 
- /* -------- */ 
+ } 
\ No newline at end of file 

Answer 1

귀하의 div의 대부분이 해결 한 폭 (예 : # 블록 제목 900px, # 메인 컨텐츠 900px를 추가 한 후 내 CSS) 이렇게하면 응답하는 모든 동작을 차단합니다.

고정 폭 값 대신 백분율을 사용해보세요. 실제로 당신은 이미 많은 좋은 반응 프레임 워크 중 하나를 사용하고, 그것을 고려하지 않은 경우에 대한 추가 방문자의 뷰포트

또 다른 옵션을 기반으로 레이아웃을 사용자 정의 할 수 media queries의 사용으로이 방법을 결합 할 수 있습니다 예 : Bootstrap 또는 Foundation. 일단 속도를 높이면 막대한 시간을 절약하고 좋은 크로스 브라우저 결과를 얻을 수 있습니다.

행운을 빈다.