[英]My Media Query is not working on google chrome and firefox
I tried to check the functionality of media query on my project webpage (localhost) using Google Chrome's Mobile Responsive Tool (F12 : ctrl+shift+M) 我尝试使用Google Chrome的移动响应工具(F12:ctrl + shift + M)在项目网页(localhost)上检查媒体查询的功能
I've placed this media query at the bottom part of my CSS. 我已将此媒体查询放置在CSS的底部。
@media screen and (max-width: 480px) {
header{
background-color: black;
}
}
unfortunately, the outcome did not change the header color to black when max-width is already at: 480px 不幸的是,当最大宽度已经为480px时,结果没有将标题颜色更改为黑色
Please click the link to view the output. 请单击链接以查看输出。 Here's how I've done my meta in the HTML:
这是我在HTML中完成元数据的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I Love Gems and Crystals</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
I am expecting that when I reached the 480px max-width, the header color will turn into black. 我期望当我达到480px最大宽度时,标题颜色将变为黑色。 But it did not.
但事实并非如此。
Google Chrome Version = screenshot Google Chrome版本= 屏幕截图
Here's my Full CSS.. 这是我的完整CSS。
*{
font-family: Garamond;
}
body, ul, li{
margin: 0;
padding: 0;
}
.wrapper{
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2%;
}
#main-menu li{
list-style-type: none;
}
header{
background-color: #20e4cb;
padding: 1px 0px;
margin: 0 auto;
}
header h1{
width: 130px;
margin-left: 50px;
float: left;
}
#logo{
background-image: url(images/Logo.png);
background-repeat: no-repeat;
text-indent: -10000px;
padding: 18px 0px;
}
#main-menu{
float: right;
}
header:after{
display: block;
content: "";
clear: both;
}
#main-menu h2{
text-indent: -10000px;
line-height: : 0;
margin: 0;
}
#main-menu li{
float: left;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
}
#main-menu li a{
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 14pt;
color: #0f4ced;
}
#main-banner img{
width: 100%;
max-height: 330px;
max-width: : 1200px;
overflow: hidden;
}
#featured-post-header{
text-align: center;
margin-top: 50px;
}
.featured-post-content{
width: 23%;
margin-left: 100px;
margin-right: 0px;
padding: 0%;
float: left;
}
.featured-post-content p{
text-align: center;
width: 200px;
font-weight: bold;
}
#knowledge{
text-align: center;
margin-top:70px;
}
#content-grid:after{
display: block;
content: "";
clear:both;
}
#knowledge-content{
width: 23%;
float: left;
margin-left: 70px;
background-color:#20e4cb;
max-height: 280px;
padding: 7px;
overflow: hidden;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#knowledge-content2{
width: 23%;
float: left;
margin-left: 70px;
background-color:#20e4cb;
max-height: 280px;
padding: 7px;
overflow: hidden;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#knowledge-content3{
width: 23%;
float: left;
margin-left: 70px;
background-color:#20e4cb;
max-height: 280px;
padding: 7px;
overflow: hidden;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#knowledge-content.open {
max-height: 2000px;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#knowledge-content2.open {
max-height: 2000px;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
#knowledge-content3.open {
max-height: 2000px;
-webkit-transition: max-height 0.7s;
-moz-transition: max-height 0.7s;
transition: max-height 0.7s;
}
.page-content:after{
display: block;
content: "";
clear: both;
}
#knowledge-content h2, p{
color: #0f4ced;
}
#knowledge-content2 h2, p{
color: #0f4ced;
}
#knowledge-content3 h2, p{
color: #0f4ced;
}
#knowledge-content p{
font-size: 16pt;
}
#knowledge-content2 p{
font-size: 16pt;
}
#knowledge-content3 p{
font-size: 16pt;
}
#button-area1{
width: 20%;
float: left;
margin-left: 14%;
}
#button-area2{
width: 20%;
float: left;
margin-left: 10%;
}
#button-area3{
width: 14%;
float: left;
margin-left: 11%;
margin-right: 0%;
}
footer{
background-color: black;
color: white;
padding: 5px 0px;
margin-top: 100px;
text-align:center;
}
#end-content-grid:after{
display:"block";
content:"";
clear: both;
}
//* MEDIA QUERIES */
@media screen and (max-width: 480px) {
header{
background-color: black;
}
}
Your CSS syntax for the media query should be like this: 您用于媒体查询的CSS语法应如下所示:
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (max-width: 480px) {
//CSS
}
Shamelessly copied and modified the CSS Snippet from: 无耻地从以下位置复制和修改了CSS代码段:
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
Bookmark the link for future references. 将链接添加为书签,以备将来参考。 Also, I would recommend that you always use
rgba()
or hexadecimal
values for colors in CSS. 另外,我建议您在CSS中始终对颜色使用
rgba()
或hexadecimal
值。
Here's a fiddle: 这是一个小提琴:
#header{ background-color: black; color:white; } @media (max-width: 480px) { #header{ background-color: blue; } }
<div id="header">Hi there!!!!!</div> <!-- Try Modifying the size of the HTML Output Section -->
OR @media "only" screen and (max-width: 480px) 或@media“仅”屏幕和(最大宽度:480px)
#header{ background-color: black; color:white; } @media only screen and (max-width: 480px) { #header{ background-color: blue; } }
<div id="header">Hi there!!!!!</div> <!-- Try Modifying the size of the HTML Output Section -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.