如何使用最大宽度的媒体查询：767px 首先使用 Bootstrap 4 移动设备

Posted 2023-03-06

【中文标题】如何使用最大宽度的媒体查询：767px 首先使用 Bootstrap 4 移动设备

【英文标题】：How to use media query for max-width: 767px using Bootstrap 4 mobile first

【发布时间】：2018-03-17 21:43:15

【问题描述】：

我正在使用 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 像素以下。

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

【问题讨论】：

你是用 sass 还是只用 css？

使用您的浏览器开发工具来确定这是否被另一个具有更高特异性的规则覆盖。

@CBroe 它根本没有出现在开发工具中，所以我认为它没有被覆盖。似乎它被忽略了，因为当我单击源时，我可以在 CSS 文件中看到它。

@AwsmeSandy 只是 CSS

【参考方案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)  ... 

【讨论】：

不使用 Safari... 我正在使用第二个框中提到的那个，显示其他方向查询：//小型设备（横向手机，小于 768px）@media（最大宽度： 767px) ... 它根本没有出现在网络开发工具中，只出现在源代码下。

您更喜欢最小和最大断点还是仅最小宽度（如在移动端）？

视口的元标记是我的问题的解决方案。赞成。在我添加这个元标记之前发生的事情是，尽管设备宽度为 320 像素或 375 像素，但在移动设备（或检查器工具中的 quazi 移动设备）上应用了带有 min-width: 768px 的媒体查询的 CSS。谢谢。