Question

我有一个简单的页面宽度，背面有一个完整的出血图像。在小屏幕中，我看到一个水平条显示，部分文本被隐藏。

html {
  height: 100%;
}
body {
  background-image: url(FreeVector-Fresh-Beer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
img {
  margin: auto;
}
.paragraph {
  text-align: center;
  margin-top: 5%;
  width: 100%;
  font-family: 'Alice', serif!important;
  color: #996633;
}
p a {
  color: #996633 !important;
  font-size: 35px !important;
  padding-top: 1%;
}
@media only screen and (min-device-width: 120px) and (max-device-width: 400px) {
  .paragraph {
    word-break: break-all;
  }
}

<body class="jumbotron">
  <figure>
    <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania">
  </figure>

  <div class="paragraph" style="font-size:50px">
    <p>Our Website Is Brewing ! ! !</p>
    <p>Coming To A Browser Near You. . .
      <br><a href="">info@me.co.uk</a>
    </p>
  </div>
</body>

如何保持文字可见并删除滚动条？我怎样才能使背景图像响应，以便我可以在任何屏幕尺寸中看到它？

Answer 1

这是一个很好的解释：CSS media queries min-width and min-device-width conflicting?

device-width指的是显示器的分辨率（例如1024来自 1024x768），而width指的是浏览器本身的宽度（如果浏览器不是，则与分辨率不同最大化）。

其他参考：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

<强>解决方案：

而不是min-device-width和max-device-width使用min-width和max-width。

＆＃13;

html {
  height: 100%;
}
body {
  background-image: url(FreeVector-Fresh-Beer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
img {
  margin: auto;
}
.paragraph {
  text-align: center;
  margin-top: 5%;
  width: 100%;
  font-family: 'Alice', serif!important;
  color: #996633;
}
p a {
  color: #996633 !important;
  font-size: 35px !important;
  padding-top: 1%;
}
@media only screen and (min-width: 120px) and (max-width: 400px) {
  .paragraph {
    word-break: break-all;
  }
}

＆＃13;

<body class="jumbotron">
  <figure>
    <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania">
  </figure>

  <div class="paragraph" style="font-size:50px">
    <p>Our Website Is Brewing ! ! !</p>
    <p>Coming To A Browser Near You. . .
      <br><a href="">info@me.co.uk</a>
    </p>
  </div>
</body>

＆＃13;

段落不显示在小屏幕上

1 个答案: