1

在某些时候，我知道我需要硬着头皮认真阅读响应式和自适应设计，但我希望有一个非常简单的方法来解决这个问题。

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

在此处输入图像描述

这是我手机上的同一页。

在此处输入图像描述

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

理想情况下，我希望这样：

  • 页面内容的宽度（以及我的<footer>元素的相应宽度，它有一个上边框）在桌面全屏时不会占用浏览器的整个宽度，但会占用我手机的整个宽度.
  • 横幅永远不会大于我桌面上图像的像素宽度，但会占据我小型手机的整个宽度。

有什么简化的方法吗？

4

2 回答 2

3

您可以使用它media-queries来处理基于视口的样式更改。例如，您可以执行以下操作：

JS 小提琴示例

/* 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%;
  }
}
于 2015-09-16T17:14:18.620 回答
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 并在手机仿真模式下查看或直接在手机上查看。

于 2015-09-16T17:32:45.107 回答