Question

我正在转换一个我从头开始使用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">

这使得一切看起来都低于767px。

我只需要对屏幕小于767px做一些小调整，我不想先从手机重新构建我的网站，此时我也不想转换为Bootstrap 3。请帮助！

Answer 1

如果您使用的是safari浏览器，请使用视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> Safari Documentation

和另一个参考why shrink-to-fit=no

根据Bootstrap 4 documentation响应断点

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

其他方向

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

以及最小和最大断点宽度

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

如何使用Bootstrap 4 mobile

1 个答案: