网页没有响应答案

【问题标题】：Web page isn't getting responsive网页没有响应
【发布时间】：2019-02-24 18:51:48
【问题描述】：

我想让我的网页具有响应性。它可以工作到 320 像素，但是当我进一步减小屏幕尺寸时，它根本不起作用，只有一半的内容可见。

这是所需的代码

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img
                src="assets/img/profile.png"
                height="520"
                width="500"
                hspace="20"
                class="responsive"
            />
        </div>
        <div class="col-md-6">
            <p>
                Lorem Khaled Ipsum is a major key to success. To succeed you must
                believe. When you believe, you will succeed. Mogul talk. Find peace,
                life is like a water fall, you’ve gotta flow. Lion! Fan luv. Eliptical
                talk.
            </p>
        </div>
    </div>
</div>

CSS：

.responsive {
    max-width: 100%;
    display: block;
    height: auto;
    margin: auto;
}

img {
    float: left;
    margin-left: 20px;
}

@media screen and (max-width: 768px) {
    .nav-menu {
        background-color: #ffffff;
    }

    .nav-toggle:hover {
        background-color: transparent;
    }

    .nav-toggle span {
        background-color: #dfdfdf;
    }

    .nav-toggle span:hover {
        background-color: #fff;
    }
}

在 320 像素左右之前都可以正常工作：

但在进一步缩小到 320px 以下后，图像不适合屏幕：

提前致谢！

【问题讨论】：

我用你提供的代码做了一个测试，它似乎工作正常。我使用了引导 4 CDN。更正。它适用于 Firefox，而不适用于 Chrome。
这很有趣，因为我刚刚在 Chrome 中测试了它，它也可以在这里工作：codepen.io/anon/pen/ErqRXe
@JaydeepBorkar 你想达到什么效果？能否附上问题的屏幕截图？
是的，我在视口上有错字。我纠正了它，它似乎也很好。
@amedina 我已经添加了问题的截图，请看一下。

标签： twitter-bootstrap web responsive-design

【解决方案1】：

这是我所做的：

我删除了 img 和 .responsive 样式，并使用了 Bootstrap .img-fluid 类（检查它here）：

/* Deleted, because it isn't relevant anymore. */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="https://via.placeholder.com/1150" class="img-fluid" />
      </div>
      <div class="col-md-6">
        <p>
          Lorem Khaled Ipsum is a major key to success. To succeed you must believe. When you believe, you will succeed. Mogul talk. Find peace, life is like a water fall, you’ve gotta flow. Lion! Fan luv. Eliptical talk.
        </p>
      </div>
    </div>
  </div>

</body>
</html>

我在我的电脑上尝试过。图像宽 1150 像素，但视口只有 300 像素宽。图像完美适配：

希望对你有帮助。

【讨论】：