Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 媒体查询在chrome中不起作用_Html_Css - Fatal编程技术网

Html 媒体查询在chrome中不起作用

Html 媒体查询在chrome中不起作用,html,css,Html,Css,我写了媒体查询,但它不起作用,我不知道为什么。它应该在宽度800px以下显示一列,但保持不变 我是这个领域的新手,所以我可能犯了一些愚蠢的错误。代码看起来不错。在这段代码中,当我在大浏览器中打开段落时,它的列是两列,但当我减小它的大小时,它应该是一列,但它保持不变 这是html部分 <!DOCTYPE html> <html> <head> <title>Home</title> <link rel="style

我写了媒体查询,但它不起作用,我不知道为什么。它应该在宽度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>
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;
    }
}

按以下代码更改@media查询:

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

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

在和和括号之间需要一个空格

@媒体屏幕和(最大宽度:800px)

这是您的错误

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

你需要在“和”和“父项”之间留出空格。如果你还需要什么,请告诉我是的,我忘记给空间了。现在可以了。非常感谢。
@media screen and(max-width:800px)