@media 查询不适用于 2 显示：无；标签

Question

I created a website and I used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, I did this and would like to keep it this way for future changes,我创建了一个网站并使用了 2 个 div，其中 1 个具有桌面布局的所有代码，一个具有所有移动代码，我这样做了并希望保持这种方式以备将来更改，

On both divs display is default and on the media queries I have it set as this:在两个 div 上显示是默认的，在媒体查询上我将其设置为：

/* DESKTOP AND MOBILE VEIWPORT TOGGLE */

@media screen and (max-width: 1024px) {
  .desktop {
    display: none;
  }

  @media screen and (max-width: 100vw) {
    .mobile {
      display: none;
    }
  }
}

HTML HTML

<div class="desktop">
    <p>desktop</p>
</div>

<--- MOBILE DIV --->

<div class="mobile">
    <p>mobile</p>
</div>

Also, all of my code can be found here with the html https://codesandbox.io/s/soph2?file=/css/index.css:244-451此外，我的所有代码都可以在这里找到 html https://codesandbox.io/s/soph2?file=/css/index.css:244-451

Also sorry if this was a stupid question, I'm 13 and I've only been coding for a year now.如果这是一个愚蠢的问题，我也很抱歉，我才 13 岁，现在我只编码了一年。

When I go to a mobile device, the desktop view does not show but neither does any of my mobile code, please help me, thank you very much!当我go到移动设备时，桌面视图不显示但我的任何移动代码也没有，请帮助我，非常感谢！

Also, I just noticed when on the desktop mode, the mobile div shows up too for some reason under the footer.另外，我刚刚注意到在桌面模式下，移动 div 出于某种原因也出现在页脚下。

Answer 1

Media queries never go in media queries.媒体查询从不 go 在媒体查询中。 Each one is basically a separate bit of css for a specific screen.对于特定屏幕，每个基本上都是一个单独的位 css。 In addition, 100vw should never be used in media queries, since it will always match.此外，永远不要在媒体查询中使用 100vw，因为它总是匹配的。 Also, please try to properly format your code.另外，请尝试正确格式化您的代码。 Makes it much more readable使其更具可读性

@media screen and (max-width: 400px) {
  .mobile {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .desktop {
    display: none;
  }
}

Answer 2

Add this in the head section:在头部部分添加：

<meta name="viewport" content="width=device-width, initial-scale=1">

 @media screen and (max-width: 1023px) {.desktop { display: none; }.mobile { display: block; } } @media screen and (min-width: 1024px) {.mobile { display: none; }.desktop { display: block; } }

 <,doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no. initial-scale=1,0. maximum-scale=1,0. minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="desktop"> <p>desktop</p> </div> <div class="mobile"> <p>mobile</p> </div> </body> </html>

@media 查询不适用于 2 显示：无；标签

问题描述

2 个解决方案

解决方案1
1 2020-10-24 00:11:45

解决方案2
0 已采纳 2020-10-24 02:25:54

@media 查询不适用于 2 显示：无； 标签

问题描述

2 个解决方案

解决方案1 1 2020-10-24 00:11:45

解决方案2 0 已采纳 2020-10-24 02:25:54

@media 查询不适用于 2 显示：无；标签

解决方案1
1 2020-10-24 00:11:45

解决方案2
0 已采纳 2020-10-24 02:25:54