如何使用Bootstrap 4首先使用媒体查询最大宽度：767px首先使用Bootstrap 4

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标签：

<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) { ... }