小编Mel*_*vin的帖子

我正在将一个从头开始制作的网站转换为使用 Bootstrap 4 的响应式网站。在我意识到 Bootstrap 4 是移动优先的，我的网站是桌面优先开发的之前，我就开始了转换。无需返回并重新制作整个网站，我想我可以使用此媒体查询添加一些更改：

    @media only screen and (max-width: 767px) {
        /***HOMEPAGE - HEADER***/
        #header {
            height: 45vh;
            background-attachment: inherit;
        }
    }

这些更改未显示在网站上，但当我检查元素并单击源时，我可以看到代码。我的其他查询工作正常，它们看起来像这样：

    @media (min-width: 768px) and (max-width: 991px) {
        /***BODY ***/
        html,
        body,
        a,
        blockquote {
            font-size: 18px;
        }

        /***MAIN & MOBILE NAV***/
        .main-nav {
            display: none;
        }

        #nav-icon3 {
            display: block;
        }
    }

我尝试添加这个元标记：

    <meta name="viewport" content="width=device-width, initial-scale=1, 
    maximum-scale=1">

这使得 767 像素下的所有内容看起来都很混乱。

当屏幕小于 767px 时，我只需要进行一些小的调整，并且我不想首先从移动设备重新构建我的网站，此时我也不想转换为 Bootstrap 3。请帮忙！