媒体查询在 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