CSS 媒体查询和移动

Question

I'm trying to make different dimension of one modal.我正在尝试制作一个模态的不同维度。

If I resize in the Browser the change is what I want.如果我在浏览器中调整大小，更改就是我想要的。

But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.但是，如果我更改 Chrome 以模拟移动环境，或者如果我在手机上打开代码，则它不起作用。

I the example I tried to make a mobile first approach.我以我尝试采用移动优先方法的示例为例。 My dialog-content is white as default.我的dialog-content默认为白色。 Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px.然后，如果宽度大于 750 像素，则更改为蓝色，如果大于 1000 像素，则更改为黑色。 I make other change too but the color is the important one in the examples.我也做了其他更改，但颜色是示例中的重要更改。

I would like to know why my "default" case is not working for mobile.我想知道为什么我的“默认”案例不适用于移动设备。

The code can be found here .代码可以在这里找到。

Answer 1

Try adding viewport meta tag in the head of the document:尝试在文档head添加视口meta标记：

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
     <!-- ... -->
  </body>
</html>

Answer 2

First, your default case (background-color: black) won't work because the dimension of your mobile screen is not >= 1000 so the responsive design will not display black, but since it meets the desired requirement of >= 750 it would display blue on your mobile.首先，您的默认情况(background-color: black)将不起作用，因为您的移动屏幕的尺寸不是 >= 1000，因此响应式设计不会显示黑色，但是由于它满足了 >= 750 的所需要求，它将在您的手机上显示蓝色。

Second your mobile view always meets the criteria for the >=750 which display a blue background .其次，您的移动视图始终满足显示blue background的 >=750 的标准。 If you want the white background you will need to add another media query.如果您想要white background ，则需要添加另一个媒体查询。

  /* width >= 400*/
  @media screen and (min-width: 400px) {
  .dialog-content {
    width: 90vw;
    max-width: 100%;
    height: 90vh;
    background-color: white;
    border-radius: 6px;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
      background-color 0.3s ease-in-out;
  }
}

Third, make sure that you have this in the head of the document <meta name="viewport" content="width=device-width, initial-scale=1.0">第三，确保你在文档的头部有这个<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS 媒体查询和移动

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-10-23 15:53:49

解决方案2
0 2021-10-23 16:21:37

CSS 媒体查询和移动

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-10-23 15:53:49

解决方案2 0 2021-10-23 16:21:37

解决方案1
1 已采纳 2021-10-23 15:53:49

解决方案2
0 2021-10-23 16:21:37