媒體查詢不在鉻中工作

-1

我寫了媒體查詢，但它不工作，我不明白爲什麼。它應該在寬度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; 
    } 
}

來源

2015-09-19 Sajib Ghosh

使用（或嘗試）前綴的'列：1;' –

這裏是你的錯誤

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

你需要把空間之間「與」和parenthe

來源

2015-09-19 09:37:45

變化通過下面的代碼，您@media查詢：

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

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

來源

2015-09-19 09:34:55

讓我知道如果你需要別的東西。 –

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

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

來源

2015-09-19 09:36:10

嘗試this JSFiddle

您需要和和括號之間的空格。

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

來源

2015-09-19 09:36:22

是的，我忘了給空間。現在它可以工作，非常感謝。 –

媒體查詢不在鉻中工作

回答

相關問題