Question

我正在研究Bootstrap项目，在我的项目中，我试图使我的网站响应

移动屏幕也没有出现，但在移动屏幕中没有响应。我做了很多尝试来建立网站

响应迅速。因此，请帮助我实现这一目标。

这是Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="main.css">

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12 bg-danger">
              <div>
                    <ol>
             <li class="heading-li">Managing cookies
                            <p class="mt-2 paragraph">9.1. Most browsers allow you to refuse to accept cookies and to
                                delete
                                cookies. The
                                methods for doing
                                so vary from browser to browser, and from version to version. You can however obtain
                                up-to-date
                                information about blocking and deleting cookies via these links:
                                (i) https://support.google.com/chrome/answer/95647?hl=en (Chrome);
                                (ii)https://support.mozilla.org/en-US/kb/enable-and-disable-cookies-website-preferences
                                (Firefox);
                                (iii) http://www.opera.com/help/tutorials/security/cookies/ (Opera);
                                (iv)https://support.microsoft.com/en-gb/help/17442/windows-internet-explorer-delete-manage-cookies
                                (Internet Explorer);
                                (v) https://support.apple.com/kb/PH21411 (Safari); and
                                (vi)https://privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy (Edge).
                                9.2. Blocking all cookies will have a negative impact upon the usability of many
                                websites.
                                9.3. If you block cookies, you will not be able to use all the features on our website.
                            </p>
                        </li>
</ol>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

这是main.css

.heading-li {
    font-size: 16px;
    font-weight: 600;
}

.paragraph {
    font-size: 16px;
    font-weight: 400 !important;
    font-family: 'Open Sans', sans-serif;
}

Answer 1

我检查了您代码的输出。反应灵敏。

我建议您阅读有关该概念的文章。似乎您不知道“响应”一词的含义。

简而言之，这意味着在任何屏幕宽度下观看时都没有水平滚动条，主要是笔记本电脑，平板电脑和手机以及越来越大的屏幕。

有关视觉和概念上的解释，请参阅： https://www.w3schools.com/html/html_responsive.asp

如何使网站在移动屏幕中响应

1 个答案: