媒体查询不接收

Question

我试图在移动 phone 上更改 div 的宽度。这是我的 css 媒体查询代码

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
 { 

         .login-page{
        width: :80% !important;;
        padding: 8% 0 0 !important;;
        margin: auto;
      }  

      body{
        background-color: red;
      }

}

我在 php 头文件中包含了以下几行

<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" media="(max-width: 713px)" href="css/media.css" />

我的方法有什么问题？

Answer 1

你需要把你@media改成这个

@media all and (min-width: 414px) and (max-width: 736px) 
 { 

         .login-page{
        width: :80% !important;;
        padding: 8% 0 0 !important;;
        margin: auto;
      }  

      body{
        background-color: red;
      }

}

Answer 2

你需要改变你自己 @media 因为所有的东西都应该像这样出现在一行中：

@media only screen and (min-device-width: 414px) and (max-device-width: 736px)

或者你也可以试试这个：

@media only screen and (min-width: 414px) and (max-width: 736px)
 { 

     .login-page{
    width: :80% !important;;
    padding: 8% 0 0 !important;;
    margin: auto;
  }  

  body{
    background-color: red;
  }

}

也从该行删除媒体：

<link rel="stylesheet" media="(max-width: 713px)" href="css/media.css" />

至：

<link rel="stylesheet" href="css/media.css" />

Answer 3

我刚刚解决了这个问题 - 经过数小时的搜索 - 通过清除 phone...

上的缓存

媒体查询不接收

Media Query not picking up

css

media-queries