Question

我正在尝试让我的网站响应。我在这个网站（http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/）上发现，为了使图像更加灵活，你必须使用max-width：100％。

我在我的网站（http://riksblog.com/Marnik/index.html）上为＃promo1img（第一个iphone图片）所做的，但正如你所看到的，它没有按预期工作。

我错过了哪些css-styles？

Answer 1

将您的section.first课程更改为以下内容:(第110行，在stijl css文件中）：

  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  background-image: url(../img/header.jpg);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;

上面的代码修复了背景封面图片。

现在html中还有其他元素没有响应。因此，对于那些，将此代码添加到您的CSS：

@media screen and (max-width: 480px){
    #contactemailp{
        margin-left:0px;
    }
    section.first .section-content .section-content-inner h1 {
        font-size: 40px;
    }
}

响应灵活的图像不起作用

1 个答案: