如何使 css 媒体查询在手机上运行
how to make css media query to work on mobile phones
我正在尝试使 .data 容器在小于 768px.if 的屏幕中显示为 flex，如果屏幕大于该宽度，它将显示为网格。
所以，在没有“切换设备工具栏”选项的情况下签入 chrome 开发人员设置时，它会按预期工作，但如果我使用“切换设备工具栏”选项，它会显示网格布局，即使屏幕宽度小于768px.i 还在手机上检查过 phone 它没有正常工作。
如果您想查看应用程序，部署在
app
如果您想查看整个代码，请访问 repo
下面是 css 和哈巴狗标记
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 © 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>
手机上应该应用的样式写在哪里？
尝试在媒体查询中使用 max-width 而不是 min-width。
尝试使用断点实现响应式布局。您可以查看 this 页面以了解响应式网页的断点。
对于响应式网页设计，移动优先是最可靠的。因此，大多数开发人员都使用最小宽度媒体查询，即使是最受欢迎的响应式 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 似乎遵循移动优先方法，这意味着您在媒体查询之外编写的所有 CSS 都是将在手机和其他小屏幕上看到的样式.
这意味着您应该为从 0 到例如768px 宽度高于您的第一个媒体查询。
这意味着您应该将 .data 的 CSS 规则（您当前在媒体查询中）移到任何媒体查询之外。这是移动优先。
然后是您的媒体查询，并使用 @media (min-width: 768px) {...;} 从 768 像素及以上开始。在这里您应该为越来越宽的视口添加样式，例如一个用于 960px，一个用于 1200px，等等。但只有在您需要时才可以。
相反，您必须从较大的屏幕开始（桌面优先），然后使用 @media (max-width: 768px) 等以仅针对屏幕 less 比你的媒体查询宽 768px。在任何情况下，您都可以调整或覆盖媒体查询中的初始 CSS。对于这种方法，通常需要对多个媒体查询进行调整，因此您可以将手机定位为 300-400 像素，例如 @media (max-width: 380px).
我没有将 meta(name="viewport", content="width=device-width, initial-scale=1.0") 添加到我的基本模板中。所以才会这样。
我正在尝试使 .data 容器在小于 768px.if 的屏幕中显示为 flex，如果屏幕大于该宽度，它将显示为网格。
所以，在没有“切换设备工具栏”选项的情况下签入 chrome 开发人员设置时，它会按预期工作，但如果我使用“切换设备工具栏”选项，它会显示网格布局，即使屏幕宽度小于768px.i 还在手机上检查过 phone 它没有正常工作。
如果您想查看应用程序，部署在 app
如果您想查看整个代码，请访问 repo
下面是 css 和哈巴狗标记
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 © 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>
手机上应该应用的样式写在哪里？
尝试在媒体查询中使用 max-width 而不是 min-width。
尝试使用断点实现响应式布局。您可以查看 this 页面以了解响应式网页的断点。
对于响应式网页设计，移动优先是最可靠的。因此，大多数开发人员都使用最小宽度媒体查询，即使是最受欢迎的响应式 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 似乎遵循移动优先方法，这意味着您在媒体查询之外编写的所有 CSS 都是将在手机和其他小屏幕上看到的样式.
这意味着您应该为从 0 到例如768px 宽度高于您的第一个媒体查询。
这意味着您应该将 .data 的 CSS 规则（您当前在媒体查询中）移到任何媒体查询之外。这是移动优先。
然后是您的媒体查询，并使用 @media (min-width: 768px) {...;} 从 768 像素及以上开始。在这里您应该为越来越宽的视口添加样式，例如一个用于 960px，一个用于 1200px，等等。但只有在您需要时才可以。
相反，您必须从较大的屏幕开始（桌面优先），然后使用 @media (max-width: 768px) 等以仅针对屏幕 less 比你的媒体查询宽 768px。在任何情况下，您都可以调整或覆盖媒体查询中的初始 CSS。对于这种方法，通常需要对多个媒体查询进行调整，因此您可以将手机定位为 300-400 像素，例如 @media (max-width: 380px).
我没有将 meta(name="viewport", content="width=device-width, initial-scale=1.0") 添加到我的基本模板中。所以才会这样。