Question

我本月在我的网络标准设计课程中学习HTML / CSS，本周我们正在修复我们的网站以便做出响应。

我已将所有px转换为百分比，并将所有字体从px转换为em。我在画廊中以最大宽度：100％搞砸了一些东西。

我会发布我的链接而不是所有代码。

http://jgoldd.github.io/wsd/index.html

Answer 1

取下身体标签的宽度和边距。创建一个名为包装器的类，并将其添加到容器中，例如

.wrapper{
   max-width:960px;
   margin:0 auto;
   width:100%;
}

<header>
     <div class="wrapper">
         // put your content in here
     </div>
</header>

<div id="content">
    <div class="wrapper">
        // put your content in here
    </div>
</div>

<footer>
     <div class="wrapper">
         // put your content in here
     </div>
</footer>

如果你不想这样做，你可以将你的身体设置为

body{
  max-width:960px;
  width:100%;
}

但是我会改变你的结构，使用包装器从一开始就练习干净的代码卫生： - ）

Answer 2

你需要稍微玩一下，但这里有一点很简单，让你朝着正确的方向前进。（删除我用REMOVE注释的行）

#gallery li{
     width: 49%;
     display: inline-block;
     .display: inline;  /* for IE 8 */
     zoom: 1; /* for IE 8 */
     /* float: left; REMOVE */
}

#gallery img {
    width: 100%;
    /* max-width: 100%; REMOVE */
}

#gallery_container{
    width: 100%;
    /* width: 41.666667%;  REMOVE */
}

试一试。应该给你更好的结果，希望能让你到达你想去的地方。

Answer 3

你的css太多了。所以，让我向您解释一种激活图像响应行为的简单技巧

在HTML中试用此代码

<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">

CSS

.resize {
    max-width: 100%;
    height: auto;
    width: auto;
}

此代码简单激活图像的响应行为。

如果您有任何疑问，请告诉我......！：）

响应式设计图像不缩放

3 个答案: