当前位置： 文江博客话题详情

媒体查询即使添加视口元标记也无法正常工作

发布于 2025-02-02 23:05:33 字数 13157 浏览 4 评论 0原文

当我插入媒体查询时，它们在Firefox检查员中工作，但在实际手机中不使用。 当我从移动设备打开它时，媒体查询将被完全忽略。

我已经阅读了以前的许多问题，但是即使我正确地放置了视口，它们仍然行不通。

这是我的代码：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.media-mobile-vertical,
.mobile-container {
  display: none;
}
div {
  display: grid;
}
body {
  background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
  color: #fff;
  font-family: Montserrat, sans-serif;
}
.header {
  height: 10vh;
  grid-template-columns: 20% 45% 30%;
}
.header-left {
  justify-items: center;
  align-items: center;
}
.header-logo {
  max-width: 250px;
}
.header-right {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: 25px;
}
.header-right-dropdown-outer {
  min-width: 100px;
  width: 100%;
  position: relative;
}
.header-right-dropdown {
  width: 100%;
  min-width: 100px;
  background-color: #181924;
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 0 rgb(22 23 33 / 35%);
  padding: 1rem;
  top: 100%;
  white-space: nowrap;
  display: none;
  position: absolute;
  right: 0;
  z-index: 9;
}
.header-right-dropdown-outer:hover .header-right-dropdown {
  display: block;
}
.nobull {
  list-style-type: none;
}
.mid-area {
  height: 80vh;
  grid-template-columns: 1fr 3fr 1fr;
}
.left-sidebar {
  width: 20vw;
  justify-items: center;
  margin-top: 10%;
}
.right-sidebar {
  width: 20vw;
  justify-items: center;
  align-items: center;
}
.mainframe {
  width: 60vw;
  justify-items: center;
  align-items: center;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
  width: 100%;
}
.btn-grey {
  border: 1px solid #1e92e6;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  background: 0 0;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-blank {
  background: 0 0;
  border: 1px solid rgba(96, 125, 139, 0.25);
  color: #fff;
}
.btn-drop-right {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
.btn-blank-sidebar {
  background: 0 0;
  border: none;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
.footer {
  height: 10vh;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
}
.footer-center {
  align-self: center;
  justify-items: center;
}
.footer-right {
  grid-template-columns: 16% 16% 16% 16% 16% 16%;
  align-items: center;
}
.footer-left {
  width: 20vw;
  justify-items: center;
  align-items: center;
}
.widget-container {
  width: 50vw;
  height: 60vh;
  background: rgba(22, 23, 33, 0.75);
  border: 1px solid rgba(96, 125, 139, 0.25);
  border-radius: 1rem;
  box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
  padding: 1rem 1rem;
  justify-self: center;
  align-self: center;
}

/* MEDIA QUERY MOBILE VERTICAL POSITION */
@media only screen and (max-width: 811px) {
  .grid-container,
  .mobile-container {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .media-mobile-vertical {
    display: grid;
    height: 100vh;
    justify-items: center;
    align-items: end;
    background-color: red;
  }
  .flip-container {
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: end;
    gap: 9%;
  }
  .media-mob-flip {
    max-width: 25%;
    align-self: end;
  }
  .mobile-mob-title {
    align-self: start;
  }
  .media-mob-logo {
    max-width: 50%;
    align-self: start;
  }
}

/* MEDIA QUERY MOBILE HORIZONTAL POSITION */
@media only screen and (min-width: 812px) and (max-width: 1025px) {
  .grid-container,
  .media-mobile-vertical {
    display: none;
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body {
    background: #181923;
  }
  .mobile-container {
    display: grid;
    max-height: 99vh;
    margin: 1%;
  }
  .mob-header-left {
    justify-items: center;
  }
  .mob-logo {
    max-width: 25%;
  }
  .mobile-footer {
    font-size: 10px;
    display: grid;
    align-self: end;
    align-items: end;
    justify-items: center;
    margin-top: 3%;
  }
  .btn,
  btn-blank-sidebar,
  btn-grey {
    height: 2px;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>-->
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1" /> -->
    <!-- <script src="/../../JS/countdown.js"></script> -->
    <link rel="stylesheet" href="dashboard.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="global0.ico" />
    <title>Dashboard Frame Draft</title>
  </head>
  <body>
    <!-- VERTICAL POSITION PHONE STARTS 1 CONTAINER / 2 ROWS-->
    <div class="media-mobile-vertical">
      <div class="flip-container">
        <img class="media-mob-flip" src="fl.png" alt="">
        <p class="mobile-mob-title">Please flip the device horizontally!</p>
      </div>
      <img class="media-mob-logo" src="global1.png" alt="">
    </div>
    <!-- VERTICAL POSITION PHONE ENDS -->
    <!-- MOBILE VERSION STARTS 1 CONATINER / 3 ROWS-->
    <div class="mobile-container">
      <!-- MOBILE HEADER STARTS 1 CONTAINER / 2 ROWS-->
      <div class="mobile-header">
        <div class="mob-header-left">
          <img class="mob-logo" src="global1.png" alt="">
        </div>
        <div class="mob-header-right"></div>
      </div>
      <!-- MOBILE HEADER ENDS -->
      <!-- MOOBILE BODY STARTS 1 CONTAINER / 1 BOX-->
      <div class="mobile-midarea">
        <div class="mob-left-sidebar">
          <ul class="mob-nobull">
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Pre-Sale</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Claim</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Play</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Stake</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Farm</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Wrap</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Bridge</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Calculator</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Walkthrough Videos</span></a></li>
          </ul>
        </div>
      </div>
      <!-- MOBILE BODY ENDS -->
      <!-- MOBILE FOOTER STARTS 1 CONTAINER / 1 BOX-->
      <div class="mobile-footer">
        <div class="mob-footer-center">
          <p>© 2022 New Company Sample LLC - All rights reserved.</p>
        </div>
      </div>
      <!-- MOBILE FOOTER ENDS -->
    </div>
    <!-- MOBILE VERSION ENDS -->
    <div class="grid-container">
      <div class="header">
        <div class="header-left">
          <a href="index.html"class="link"><img class="header-logo" src="global1.png" alt="" /></a>
        </div>
        <div class="header-center"></div>
        <div class="header-right">
          <div class="header-right-dropdown-outer">
            <button class="btn btn-grey"><span>Tools</span></button>
            <div class="header-right-dropdown">
              <ul class="nobull">
                <li><a href="#" class="btn btn-grey btn-blank"><span>Buy on PancakeSwap</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Add token to wallet</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Borrow</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Wrap</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Bridge</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Customize</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Developer API</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Walkthrough Videos</span></a></li>
              </ul>
            </div>
          </div>
          <div class="header-right-dropdown-outer">
            <button class="btn btn-drop-right btn-grey"><span>Connect Wallet</span></button>
            <div class="header-right-dropdown">
              <ul class="nobull">
                <li><a href="#" class="btn btn-grey btn-blank"><span>Metamask</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Wallet Connect</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Binance Wallet</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Trust Wallet</span></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="mid-area">
        <div class="left-sidebar">
          <ul class="nobull">
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Pre-Sale</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Claim</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Play</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Stake</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Farm</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Wrap</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Bridge</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Calculator</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Walkthrough Videos</span></a></li>
          </ul>
        </div>
        <div class="mainframe">
          <div class="widget-container">
            <!-- WIDGET SUBCONTAINER GOES HER -->
          </div>
        </div>
        <div class="right-sidebar"></div>
      </div>
      <div class="footer">
        <div class="footer-left"></div>
        <div class="footer-center">
          <p>© 2022 New Company Sample LLC - All rights reserved.</p>
        </div>
        <div class="footer-right">
          <div class="footer-right-menu">Litepaper</div>
          <div class="footer-right-menu">Manifest</div>
          <div class="footer-right-menu">Press</div>
          <div class="footer-right-menu">Team</div>
          <div class="footer-right-menu">Carrer</div>
          <div class="footer-right-menu">Contact Us</div>
        </div>
      </div>
    </div>
  </body>
</html>

我该如何解决？

原文

When I insert the media queries, they work in the Firefox inspector but not in the actual mobile.
When I open it from mobile the media queries are ignored completely.

I already read many of the previous questions, however even if I placed the viewport correctly, they still don't work.

Here is my code:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.media-mobile-vertical,
.mobile-container {
  display: none;
}
div {
  display: grid;
}
body {
  background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
  color: #fff;
  font-family: Montserrat, sans-serif;
}
.header {
  height: 10vh;
  grid-template-columns: 20% 45% 30%;
}
.header-left {
  justify-items: center;
  align-items: center;
}
.header-logo {
  max-width: 250px;
}
.header-right {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: 25px;
}
.header-right-dropdown-outer {
  min-width: 100px;
  width: 100%;
  position: relative;
}
.header-right-dropdown {
  width: 100%;
  min-width: 100px;
  background-color: #181924;
  border-radius: 0.5rem;
  box-shadow: 3px 3px 0 0 rgb(22 23 33 / 35%);
  padding: 1rem;
  top: 100%;
  white-space: nowrap;
  display: none;
  position: absolute;
  right: 0;
  z-index: 9;
}
.header-right-dropdown-outer:hover .header-right-dropdown {
  display: block;
}
.nobull {
  list-style-type: none;
}
.mid-area {
  height: 80vh;
  grid-template-columns: 1fr 3fr 1fr;
}
.left-sidebar {
  width: 20vw;
  justify-items: center;
  margin-top: 10%;
}
.right-sidebar {
  width: 20vw;
  justify-items: center;
  align-items: center;
}
.mainframe {
  width: 60vw;
  justify-items: center;
  align-items: center;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
  width: 100%;
}
.btn-grey {
  border: 1px solid #1e92e6;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  background: 0 0;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-blank {
  background: 0 0;
  border: 1px solid rgba(96, 125, 139, 0.25);
  color: #fff;
}
.btn-drop-right {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
.btn-blank-sidebar {
  background: 0 0;
  border: none;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
.footer {
  height: 10vh;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
}
.footer-center {
  align-self: center;
  justify-items: center;
}
.footer-right {
  grid-template-columns: 16% 16% 16% 16% 16% 16%;
  align-items: center;
}
.footer-left {
  width: 20vw;
  justify-items: center;
  align-items: center;
}
.widget-container {
  width: 50vw;
  height: 60vh;
  background: rgba(22, 23, 33, 0.75);
  border: 1px solid rgba(96, 125, 139, 0.25);
  border-radius: 1rem;
  box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
  padding: 1rem 1rem;
  justify-self: center;
  align-self: center;
}

/* MEDIA QUERY MOBILE VERTICAL POSITION */
@media only screen and (max-width: 811px) {
  .grid-container,
  .mobile-container {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .media-mobile-vertical {
    display: grid;
    height: 100vh;
    justify-items: center;
    align-items: end;
    background-color: red;
  }
  .flip-container {
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: end;
    gap: 9%;
  }
  .media-mob-flip {
    max-width: 25%;
    align-self: end;
  }
  .mobile-mob-title {
    align-self: start;
  }
  .media-mob-logo {
    max-width: 50%;
    align-self: start;
  }
}

/* MEDIA QUERY MOBILE HORIZONTAL POSITION */
@media only screen and (min-width: 812px) and (max-width: 1025px) {
  .grid-container,
  .media-mobile-vertical {
    display: none;
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body {
    background: #181923;
  }
  .mobile-container {
    display: grid;
    max-height: 99vh;
    margin: 1%;
  }
  .mob-header-left {
    justify-items: center;
  }
  .mob-logo {
    max-width: 25%;
  }
  .mobile-footer {
    font-size: 10px;
    display: grid;
    align-self: end;
    align-items: end;
    justify-items: center;
    margin-top: 3%;
  }
  .btn,
  btn-blank-sidebar,
  btn-grey {
    height: 2px;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>-->
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1" /> -->
    <!-- <script src="/../../JS/countdown.js"></script> -->
    <link rel="stylesheet" href="dashboard.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="global0.ico" />
    <title>Dashboard Frame Draft</title>
  </head>
  <body>
    <!-- VERTICAL POSITION PHONE STARTS 1 CONTAINER / 2 ROWS-->
    <div class="media-mobile-vertical">
      <div class="flip-container">
        <img class="media-mob-flip" src="fl.png" alt="">
        <p class="mobile-mob-title">Please flip the device horizontally!</p>
      </div>
      <img class="media-mob-logo" src="global1.png" alt="">
    </div>
    <!-- VERTICAL POSITION PHONE ENDS -->
    <!-- MOBILE VERSION STARTS 1 CONATINER / 3 ROWS-->
    <div class="mobile-container">
      <!-- MOBILE HEADER STARTS 1 CONTAINER / 2 ROWS-->
      <div class="mobile-header">
        <div class="mob-header-left">
          <img class="mob-logo" src="global1.png" alt="">
        </div>
        <div class="mob-header-right"></div>
      </div>
      <!-- MOBILE HEADER ENDS -->
      <!-- MOOBILE BODY STARTS 1 CONTAINER / 1 BOX-->
      <div class="mobile-midarea">
        <div class="mob-left-sidebar">
          <ul class="mob-nobull">
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Pre-Sale</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Claim</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Play</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Stake</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Farm</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Wrap</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Bridge</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Calculator</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Walkthrough Videos</span></a></li>
          </ul>
        </div>
      </div>
      <!-- MOBILE BODY ENDS -->
      <!-- MOBILE FOOTER STARTS 1 CONTAINER / 1 BOX-->
      <div class="mobile-footer">
        <div class="mob-footer-center">
          <p>© 2022 New Company Sample LLC - All rights reserved.</p>
        </div>
      </div>
      <!-- MOBILE FOOTER ENDS -->
    </div>
    <!-- MOBILE VERSION ENDS -->
    <div class="grid-container">
      <div class="header">
        <div class="header-left">
          <a href="index.html"class="link"><img class="header-logo" src="global1.png" alt="" /></a>
        </div>
        <div class="header-center"></div>
        <div class="header-right">
          <div class="header-right-dropdown-outer">
            <button class="btn btn-grey"><span>Tools</span></button>
            <div class="header-right-dropdown">
              <ul class="nobull">
                <li><a href="#" class="btn btn-grey btn-blank"><span>Buy on PancakeSwap</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Add token to wallet</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Borrow</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Wrap</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Bridge</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Customize</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Developer API</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Walkthrough Videos</span></a></li>
              </ul>
            </div>
          </div>
          <div class="header-right-dropdown-outer">
            <button class="btn btn-drop-right btn-grey"><span>Connect Wallet</span></button>
            <div class="header-right-dropdown">
              <ul class="nobull">
                <li><a href="#" class="btn btn-grey btn-blank"><span>Metamask</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Wallet Connect</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Binance Wallet</span></a></li>
                <li><a href="#" class="btn btn-grey btn-blank"><span>Trust Wallet</span></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="mid-area">
        <div class="left-sidebar">
          <ul class="nobull">
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Pre-Sale</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Claim</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Play</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Stake</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Farm</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Wrap</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Bridge</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Calculator</span></a></li>
            <li><a href="#" class="btn btn-grey btn-blank-sidebar"><span>Walkthrough Videos</span></a></li>
          </ul>
        </div>
        <div class="mainframe">
          <div class="widget-container">
            <!-- WIDGET SUBCONTAINER GOES HER -->
          </div>
        </div>
        <div class="right-sidebar"></div>
      </div>
      <div class="footer">
        <div class="footer-left"></div>
        <div class="footer-center">
          <p>© 2022 New Company Sample LLC - All rights reserved.</p>
        </div>
        <div class="footer-right">
          <div class="footer-right-menu">Litepaper</div>
          <div class="footer-right-menu">Manifest</div>
          <div class="footer-right-menu">Press</div>
          <div class="footer-right-menu">Team</div>
          <div class="footer-right-menu">Carrer</div>
          <div class="footer-right-menu">Contact Us</div>
        </div>
      </div>
    </div>
  </body>
</html>

How do I fix this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

清风疏影 2025-02-09 23:05:33

添加元标记

并从meta中删除其他部分

/*replace your css media query with line */ 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* here you write ccs*/
  
}

Add meta tag

and remove other part from meta

/*replace your css media query with line */ 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* here you write ccs*/
  
}

回复 原文
凉薄对峙 2025-02-09 23:05:33

它只需要将媒体=添加到头部的链接标签中：

<link media="screen and (max-device-width: 811px)" rel="stylesheet" href="dashboard.css" />

It just needed to add the media= into a link tag in the head:

<link media="screen and (max-device-width: 811px)" rel="stylesheet" href="dashboard.css" />
回复 原文
给不了的爱 2025-02-09 23:05:33

编辑

由于“视口”元标记不是问题，然后

@media only screen and (max-width: 480px) {
.media-mobile-vertical {
    display: grid;
    height: 100vh;
    justify-items: center;
    align-items: end;
    background-color: red;
  }
}

在＆lt; head＆gt;标签之后在CSS中尝试使用此代码

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Edit

Since the "viewport" meta tag is not the problem, then try this in your css

@media only screen and (max-width: 480px) {
.media-mobile-vertical {
    display: grid;
    height: 100vh;
    justify-items: center;
    align-items: end;
    background-color: red;
  }
}

Use this code after the start of the <head> tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
回复 原文
只怪假的太真实 2025-02-09 23:05:33
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* CSS */
}

尝试使用此媒体查询。

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* CSS */
}

Try using this media query instead.

回复 原文
~没有更多了~

关于作者

极致的悲

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文