Question

在某些时候，我知道我需要咬紧牙关并对响应式和自适应设计做一些认真的阅读，但我希望有一个非常简单的方法来解决这个问题。

我有以下网页，在我的桌面浏览器中显示。

这是我手机上的同一页。

虽然这里可能很难说，但在我的手机上观看时横幅太小了。

理想情况下，我希望如此：

页面内容的宽度（以及具有顶部边框的<footer>元素的相应宽度）在桌面上全屏显示时不占用浏览器的整个宽度，但确实占用了我的手机的整个宽度。
横幅永远不会比桌面上图像的像素宽度大，但会占用我小手机的整个宽度。

有没有简化方法呢？

Answer 1

您可以使用media-queries根据视口处理样式更改。例如，您可以执行以下操作：

JS Fiddle Example

/* Desktop Styles here*/
footer {
  background: blue;
  width: 500px;
}
.banner > img {
  width: 300px;
}

/* When the screen is smaller than 560px, specify what properties you wan to change. */
@media only screen and (max-width: 560px) {
  footer {
    width: 100%;
  }
  .banner > img {
    width: 100%;
  }
}

Answer 2

除了您应该认真考虑的严肃响应的媒体查询之外，您还需要调整标题中的视口元标记。将<meta name="viewport" content="width=device-width, initial-scale=1">添加到<head>标记，以指示手机浏览器不要尝试以缩小状态显示该页面。所以，例如：

...
<head>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <title>Hooray Banana</title>
        <meta name="keywords" content="This page is a placeholder for future content.">
        <meta name="description" content="sc web group">
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...

然后F12并在手机模拟模式下查看或直接在手机上查看。

横幅在移动设备上太小

2 个答案: