Question

我试图在手机上更改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

我刚刚解决了这个问题 - 经过数小时的搜索 - 清除手机上的缓存 ...

Answer 2

您需要将@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 3

您需要更改@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" />

媒体查询未获取

3 个答案: