可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

My media query just won't work, can anyone see what I've missed? I've tried adding:

!important; after media query css declarations
adding css ancestral specificity to media query css declarations

No luck. I have the meta viewport tag in the header. Here's my html:

<!DOCTYPE html> 
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<link rel="stylesheet" href="css/jquery.fadeshow-0.1.1.min.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="abc" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery/jquery.fadeshow-0.1.1.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#nav').click(function() {
$(this).toggleClass('open');
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>

and the css

.container {
 position: relative;
 margin: 0 auto;
 width: 100%;
 max-width: 1024px;
 font-family: "Source Sans Pro", sans-serif;
 font-weight: 400;
 color: #1a1a1a;
 line-height: 150%; 

}
.content {
 position: relative;
 padding: 43% 17% 3%;

}

h1 {
 font-family: "Source Sans Pro", sans-serif;
 font-weight: 700;
 font-size: 2.5em;
 font-style: italic;
 color: #426432;
 text-shadow: 0px 0px 1.3em white, 0px 0px 1.3em white, 0px 0px 1.3em white;
 line-height: 150%;
 text-align: center;
 margin-bottom: 50px;
 margin-left: -15px;
}

@media screen and (max-width: 500px){

.content {
  padding: 43% 5% 3%;

 }

 h1 {
     font-size: 1.65em;
     line-height: 150%;
     margin-bottom: 30px;
 }

 .body {
     font-size: 1em;
     letter-spacing: .01em;
     line-height: 150%;
 }
}

Any ideas?

回答1:

I could suggest that you add the alternate css (default) to another media query of min-width 501px. This however shouldn't be necessary, I have encountered issues with characters being skipped as they had been the wrong format being copied from websites.

What is happening or not happening? Is nothing changing? I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.

In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:

body .test-parent .test-child {
    color: red;
}
body .test-parent .test-child {
    color: blue;
}

The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.

However if we declare the following:

body .test-parent-two .test-child-two {
    color: red;
}
body .test-child-two {
    color: blue;
}

Then the final value is color: red;. This caught me off guard and it took me a while to notice the pattern and fix.

The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle.

Hope that also helps!

回答2:

It doesn't look like you provided the full HTML snippet in your post. Nonetheless, maybe try:

@media (max-width: 500px) {
    /* your code here */
}

Media Query not responding to changing browser siz

问题:

回答1:

回答2:

收藏的人(0)

Media Query not responding to changing browser siz

问题:

回答1:

回答2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮