媒体查询在 Chrome 中不起作用
[英]media query is not working in chrome
问题描述
I have written media query but its not working, and I can not figure out why.
我写了媒体查询，但它不起作用，我不知道为什么。 It should show one column below width 800px, but it remains same.它应该显示宽度低于 800px 的一列，但它保持不变。
I am new in this field so may be I have done some stupid mistakes.我是这个领域的新手，所以我可能犯了一些愚蠢的错误。 The code looks fine.代码看起来不错。 In this code the the column of the paragraph is two when I open it in big browser, but when I reduce its size it should be one column, but it remains same.在这段代码中，当我在大浏览器中打开它时，段落的列是两列，但是当我减小它的大小时，它应该是一列，但它保持不变。
This is the html part这是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>
This is the css part这是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;
}
}
4 个解决方案
解决方案1
0 2015-09-19 09:34:55
Change your @media query by the below code :通过以下代码更改您的@media 查询：
@media (max-width:800px)
{
p
{
color: red;
-webkit-columns:1;
-moz-columns:1;
}
}
解决方案2
0 2015-09-19 09:36:10
@media screen and (max-width:800px) // give space after and
{
p
{
color: red;
-webkit-columns:1;
-moz-columns:1;
}
}
解决方案3
0 2015-09-19 09:36:22
Try this JSFiddle试试这个 JSFiddle
You need a space between the and and the brackets.和和括号之间需要一个空格。
@media screen and (max-width:800px)
解决方案4
0 已采纳 2015-09-19 09:37:45
Here is your mistake这是你的错误
@media screen and(max-width:800px)
You need to put space between "and" and parenthe你需要在“and”和括号之间加空格
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.