-1

我想让 html 文件具有响应性，但我遇到的问题是，当我将宽度更改为 90% 时，它会使网页并使投资组合部分转到最右边，将内容部分放在最左边，部分之间有间隙。aima 试图做的是使网页可修复？我为可能的静态页面添加指向小提琴 js 的链接 http://jsfiddle.net/aElnajjar/YJA9E/

添加persent后我的CSS

@@ -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
4

1 回答 1

0

您的许多 div 具有固定宽度（例如 #block-title 900px、#main-content 900px ），因此这将阻止任何响应行为。

您可以尝试使用百分比而不是固定宽度值。在实践中，您可能必须将此方法与媒体查询的使用结合起来，以根据访问者的视口进一步自定义布局

如果您还没有考虑过，另一种选择是使用众多优秀的响应式框架之一，例如Bootstrap或Foundation。一旦你熟悉了它们，它们将为你节省大量时间并提供良好的跨浏览器结果。

祝你好运！

于 2013-06-07T02:59:45.010 回答