如何使css媒体查询在手机上工作答案

【问题标题】：how to make css media query to work on mobile phones如何使css媒体查询在手机上工作
【发布时间】：2021-08-23 04:07:44
【问题描述】：

我正在尝试让 .data 容器在小于 768 像素的屏幕中显示 flex。如果屏幕大于该宽度，它将显示为网格。

所以，在没有“切换设备工具栏”选项的情况下检查 chrome 开发人员设置时，它按预期工作，但如果我使用“切换设备工具栏”选项，即使屏幕宽度小于 768 像素，它也会显示网格布局。我也检查了手机无法正常工作。

如果你想看应用，部署在 app

如果您想查看整个代码，请访问repo

下面是 css 和 pug 标记

css

.data{
    display: flex;
    flex-direction: column;
    padding: 10px;
    
    }

@media only screen and (min-width: 768px ) {

        .data{
            text-align: justify;
            display: grid;
            gap: 20px;
            padding: 10px;
            
            grid-template-columns: repeat(3,1fr);
            grid-template-areas: "heading heading notification";
        }
        .heading{
            grid-area: heading;
            text-align: justify;
        }
        .notification{grid-area: notification;}
        
        
    
}

哈巴狗文件

extends base 

block content 
 .main
   .home 
      .content 
        h1.content WELCOME TO WINROBOT 

   .data
      .heading
        h2 Heading 
        p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi error, eius a asperiores repellat ex sapiente sit, ut explicabo cupiditate eveniet esse facere corporis facilis excepturi ipsum voluptates nesciunt debitis.Eveniet sit at iure molestias, ipsum, dolorum doloremque delectus reprehenderit alias quae quis asperiores soluta, voluptates quos omnis? Qui quasi ducimus inventore pariatur amet perspiciatis omnis ratione velit est hic.Doloremque accusantium sit vero quasi a adipisci, asperiores officia earum delectus reiciendis harum quae aspernatur itaque non mollitia iste sapiente eius totam, quibusdam optio, eum repellendus minima velit. Nobis, fugit?Consequuntur, eos velit. Delectus fuga rem assumenda eum laborum deleniti adipisci, eveniet voluptatibus magnam quaerat odit recusandae amet. Magni doloribus architecto ipsum ut beatae animi aliquid culpa natus molestias molestiae!Iusto totam inventore harum, magni a consequatur accusamus ipsam vero numquam rerum autem impedit quia ex provident perferendis voluptates, maxime quaerat, aliquam qui ullam possimus voluptate. Voluptas aut quaerat iste!Repellat aliquid veritatis, dolorum ipsam magni dolores dolor a, placeat odio amet obcaecati est hic omnis nesciunt sunt ad accusantium nulla. Nisi laboriosam consequuntur nulla, sint doloremque ex minima pariatur.Tempora dolorem tenetur quam repellendus, magni fuga voluptatum perspiciatis officiis ea iure quis exercitationem incidunt obcaecati deleniti quo sed recusandae provident doloremque id dicta inventore. Magnam cupiditate ea facilis placeat.Explicabo alias optio earum inventore quo impedit quis, consectetur nisi dolor? Hic accusantium consequatur rem vel cumque recusandae ratione illum omnis, aut tenetur iure quo dolorum nisi nesciunt itaque numquam?Quasi sunt cum libero veritatis, perspiciatis voluptates quis similique suscipit eligendi adipisci magnam id expedita ratione aperiam, velit unde temporibus? Vel obcaecati quae porro, ratione officia veritatis eius modi dolorum?Doloremque rem nisi fugit corporis eos libero dolorem sapiente aperiam maiores earum soluta facilis explicabo reiciendis expedita omnis iste, eum tenetur obcaecati voluptas odit optio perspiciatis tempore. Exercitationem, illo nesciunt!
      .notifications 
        h2 Notifications
        if (user && user.role === 'admin')
         button.btn.btnAddNotification new notification
        .note 
          h3.ntitle title 
          p.ndate Date
          p.ncontent notification content
        if (user && user.role === 'admin')
          button.btn.btnDeleteNotification Remove

浏览器生成的 html


<!DOCTYPE html >
<html>
    <head>
          <title>Winrobot | Home</title>
          <link rel="shortcut icon" type="image/png" href="/img/favicon.png"/>
          <link rel="stylesheet" href="/css/styles.css"/>
    </head>
    <body>
        <nav class="navbar">
            <div class="brand">
                <a href="/">
                    <div class="d-flex"><img class="logo" src="/img/logo.jpg" alt="Logo"/>
                        <p class="brand-name" style="margin:auto 0;">WINROBOT </p>
                    </div>
                </a>
            </div>
            <div class="nav-content">
                <ul class="navbar-nav">
                    <li class="navbar-item"> <a class="navbar-link" href="/">Home </a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/courses">Courses </a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/about">About</a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/login">Login </a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/signup">Signup </a></li>
                </ul>
                <button class="collapsible"> </button>
            </div>
        </nav>
        <div class="main">
           <div class="home">
                <div class="content">
                     <h1 class="content">WELCOME TO WINROBOT </h1>
                </div>
            </div>
            <div class="data">
                <div class="heading">
                    <h2>Heading </h2>
                    <p>Lorem, ipsum dolor sit amet consectetur, illo nesciunt!</p>
                </div>
                <div class="notifications">
                     <h2>Notifications</h2>
                     <div class="note">
                          <h3 class="ntitle">title </h3>
                          <p class="ndate">Date</p>
                          <p class="ncontent">notification content</p>
                     </div>
                </div>
            </div>
        </div>
            <footer class="footer">
                <div class="copy">
                    <div class="links">
                        <h4>All rights reserve to &copy; winrobot </h4>
                    </div>
                </div>
                <div class="social">
                    <h3>Social Media </h3>
                    <div class="links">
                        <a href="#" target="_blank">facebook</a> |  <a href="#" target="_blank">twitter </a>
                    </div>
                </div>
                <div class="contact">
                    <h3>Contact</h3>
                    <div class="links">
                         <a href="tel:+918463914092">Call Us</a> | <a href="mailto:winrobot@gmail.com" target="_blank">Send Email </a>
                    </div>
                </div>
            </footer>
            <script src="/js/bundle.js"> </script>
    </body>
</html>

【问题讨论】：

为了更容易理解您的问题，请排除您问题中的所有哈巴狗内容，因为这似乎是哈巴狗问题。只需使用在浏览器中看到的实际 html (Ctrl-U) 即可向我们展示问题所在。我们不知道 user 或 user.role 值的值，因此我们无法判断最终的 html 是什么，如果该部分甚至相关，否则可以完全忽略它。

标签： html css media-queries pug

【解决方案1】：

对于响应式网页设计，移动优先是最可靠的。所以大多数开发者都使用最小宽度媒体查询，甚至最流行的响应式 CSS 框架 "Bootstrap" 推荐使用最小宽度明智的媒体查询...

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

更多信息Visit Bootstrap Site我希望这个对你有帮助

【讨论】：

在我的 css 中， .data{} 是默认样式，它是 flex 。 @media only screen and (min-width: 768px) 用于较大的屏幕。数据将是一个网格。但即使对于较小的屏幕宽度，它也会显示为网格......就像在图像中一样
还有什么是“切换设备工具栏”的东西，如果没有这个选项，我的样式在桌面浏览器中应该是这样工作的..

【解决方案2】：

您的 CSS 似乎遵循移动优先的方法，这意味着您在媒体查询之外编写的所有 CSS 都是将在手机和其他小屏幕上看到的样式。

这意味着您应该为屏幕编写样式，从 0 到 e.g. 768px 宽度高于您的第一个媒体查询。

这意味着您应该将.data（您当前在媒体查询中的）的 CSS 规则移到任何媒体查询之外。这是移动优先。

然后是您的媒体查询，从 768px 及以上开始使用@media (min-width: 768px) {...;}。在这里，您应该为越来越宽的视口添加样式，例如，一种用于 960 像素，一种用于 1200 像素，等等。但前提是您需要这样做。

反过来，您必须从较大的屏幕（桌面优先）开始，然后使用 @media (max-width: 768px) 等来定位宽度小于 768 像素的屏幕小于媒体查询。在任何情况下，您都可以在媒体查询中调整或覆盖您的初始 CSS。对于这种方法，通常也需要对多个媒体查询进行调整，因此您可以将手机定位为 300-400 像素，例如 @media (max-width: 380px)。

【讨论】：

是的，但是正如您在图像中看到的那样，即使屏幕宽度小于 768px，它仍然使用媒体查询样式
您当前的@media (min-width: 768px) 意味着它只会在屏幕大于 768px 时才会启动。因此，您要么需要将 .data 的移动样式移动到该媒体查询之外，要么必须将媒体查询更改为使用 (min-width: 768px)。
@media (min-width: 768px ) 即使屏幕尺寸小于 768px 也会启动...抱歉无法理解您在说什么
我的手机样式不在媒体查询范围内。内部媒体查询 .data 显示为网格。但即使屏幕尺寸小于 768 像素，媒体查询样式也在应用，这是不应该的。我无法找到发生这种情况的原因
@SureshD 查看我的答案，并访问一次引导文档...

【解决方案3】：

你在哪里写应该应用在手机上的样式？

尝试在媒体查询中使用 max-width 而不是 min-width。

【讨论】：

默认样式应该用于手机.....在 .home::before 规则之后有 .data{} 规则我告诉它默认显示为 flex 但当屏幕宽度为最小 768px 将 .data{} 显示为网格。在这种情况下如何在媒体查询中使用 max-width ？
请花点时间阅读help center 中的editing help。 Stack Overflow 上的格式与其他网站不同。

【解决方案4】：

我没有将meta(name="viewport", content="width=device-width, initial-scale=1.0") 添加到我的基本模板中。这就是它表现得那样的原因。

【讨论】：

【解决方案5】：

尝试使用断点实现响应式布局。您可以查看 this 页面以获取响应式网页的断点。

【讨论】：

我正在尝试在没有引导程序的情况下实现这一点.....
@media only screen and (min-width: 768px ) 是一个断点。
我用的是同款