媒體查詢在 Chrome 中不起作用

Question

我寫了媒體查詢，但它不起作用，我不知道為什么。 它應該顯示寬度低於 800px 的一列，但它保持不變。

我是這個領域的新手，所以我可能犯了一些愚蠢的錯誤。 代碼看起來不錯。 在這段代碼中，當我在大瀏覽器中打開它時，段落的列是兩列，但是當我減小它的大小時，它應該是一列，但它保持不變。

這是html部分

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>

    <link rel="stylesheet" href="style.css" type="text/css">

</head>
<body>

    <div class="section"> 
        <p>
            mksajakjskakajkajk adjkajkaj adjakj ajksja adjkaj d nkkakcank ncaj jdka njdahj adnjkaj ndka jhjh cbnzbc njahjas jksjka znxzmn xnkxna xnak xankxna cnakxnak xnakxaanxa ajkxaj cjsijdssajksji sako sajib fh ghosh xnx, xmlala kk ckkxm lkal cmamca cmkkdk scnknvns snkcjk cskj mckj c. sakjob fg sajib ghosh sahoiu sajib fhosn sajin ghosh sajib ghosh sajinsahisajib ghosh sajib ghosh sajib ghosh
        </p>

    </div>
</body>
</html>

這是css部分

body
{
    margin:auto;
    width: 80%;
}

.section
{
    width:70%;
    margin: auto;
}

p
{
    -webkit-columns:2;
    -moz-columns:2;
}

@media screen and(max-width:800px)
{
    p
    {

       color: red;
       -webkit-columns:1;
       -moz-columns:1;
    }
}

Answer 1

通過以下代碼更改您的@media 查詢：

@media (max-width:800px)
{
    p
    {

       color: red;
       -webkit-columns:1;
       -moz-columns:1;
    }
}

Answer 2

@media screen and (max-width:800px)  // give space after and
{
   p
  {

     color: red;
     -webkit-columns:1;
     -moz-columns:1;
  }
}

Answer 3

試試這個 JSFiddle

和和括號之間需要一個空格。

@media screen and (max-width:800px)

Answer 4

這是你的錯誤

@media screen and(max-width:800px)

你需要在“and”和括號之間加空格

媒體查詢在 Chrome 中不起作用

問題描述

4 個解決方案

解決方案1
0 2015-09-19 09:34:55

解決方案2
0 2015-09-19 09:36:10

解決方案3
0 2015-09-19 09:36:22

解決方案4
0 已采納 2015-09-19 09:37:45

媒體查詢在 Chrome 中不起作用

問題描述

4 個解決方案

解決方案1 0 2015-09-19 09:34:55

解決方案2 0 2015-09-19 09:36:10

解決方案3 0 2015-09-19 09:36:22

解決方案4 0 已采納 2015-09-19 09:37:45

解決方案1
0 2015-09-19 09:34:55

解決方案2
0 2015-09-19 09:36:10

解決方案3
0 2015-09-19 09:36:22

解決方案4
0 已采納 2015-09-19 09:37:45