媒体查询不在铬中工作

-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

是的，我忘了给空间。现在它可以工作，非常感谢。 –

媒体查询不在铬中工作

回答

相关问题