我使用 CSS 媒体查询有多个断点。我的问题在于 320px 的媒体查询。将视口(viewport)设置为 320px 时，不会加载 320px 的媒体查询。加载 640px 的媒体查询而不是 320px 的查询。为什么？
我的html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0">
<meta name="description" content="Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com">
<meta name="keywords" content="Websites, Web Design, Web Developement, Interactive Design, Search Engine Optimization, SEO, Motion Graphics, Video Editing, Graphic Design, Print, Branding, Logo">
<title>Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link href='http://fonts.googleapis.com/css?family=Rajdhani:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mediaQueries.css">
</head>
<body>
<section class="container clearfix">
<section id="navBar" class="grid_12">
</section>
<header id="banner" class="grid_12">
<div class="container headlineContainer">
<h1>
<p><strong>Creative</strong></p>
<p><strong>Graphic • Web • Motion</strong></p>
<p><strong>Designs</strong></p>
</h1>
</div>
<div class="container arrowContainer">
<div id="arrow">
<img src="img/arrow.png" alt="Scroll Down">
</div>
</div>
</header>
<section class="stretch grid_12"></section>
<footer id="footer" class="grid_12">
</footer>
</section>
<script type="text/javascript" src="jscript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery.fittext.js"></script>
<script type="text/javascript">
jQuery("h1, h2, h3, p").fitText(2)
</script>
</body>
</html>
我的CSS:
/******* Global Styles ******************************************/
body {
font-family: 'Rajdhani', sans-serif;
color: #333;
font-size: 50px;
font-weight: 400;
}
img {
max-width: 100%;
}
/******* Typography Styles *************************************/
strong {
color: #fff;
font-weight: 500;
}
span #bold {
font-weight: 700;
}
h2 {
color: #333;
}
/******* Header Styles *********************************************/
#banner {
background: #333 url('bg/banner.png') no-repeat right top;
background-size: cover;
height: 600px;
}
.headlineContainer {
height: 40%;
float: left;
padding-top: 12.5%;
font-size: .6em;
}
.headlineContainer h1 {
line-height: 0em;
text-align: center;
}
.arrowContainer {
float: left;
height: 10%;
padding-top: 10%;
}
#arrow {
height: 100%;
width: 7%;
margin: auto;
}
/******* test styles ***************************************/
.stretch {
height: 2000px;
}
我的媒体查询:
/******* Tablet Landscape *************************************/
@media(max-width: 1024px) {
#banner {
height: 400px;
}
.headlineContainer {
padding-top: 15%;
}
.arrowContainer {
padding-top: 9%;
}
}
/******* Tablet Portrait *******************************/
@media(max-width: 768px) {
#banner {
height: 300px;
}
.headlineContainer {
padding-top: 13.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
/******* Phone Landscape **********************************************/
@media(max-width: 480px) {
.headlineContainer {
padding-top: 12%;
}
.arrowContainer {
padding-top: 2%;
}
}
/******* Phone Portrait ********************************/
@media(max-width: 320px) {
.headlineContainer {
padding-top: 22%;
}
.arrowContainer {
padding-top: 0;
}
}
/******* Odd Breakpoints **************************/
@media(max-width: 1200px) {
#banner {
height: 500px;
}
.headlineContainer {
padding-top: 11.5%;
}
.arrowContainer {
padding-top: 9%;
}
}
@media(max-width: 896px) {
#banner {
height: 350px;
}
.headlineContainer {
padding-top: 10.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
@media(max-width: 640px) {
#banner {
height: 200px;
}
.headlineContainer {
padding-top: 6.5%;
}
.arrowContainer {
padding-top: 4%;
}
}
最佳答案
@media(max-width: 640px)适用于所有尺寸 640px及以下，因此此媒体查询中指定的样式也将应用于 320px 的屏幕宽度。媒体查询不会增加内部 CSS 规则的特异性。因为你的@media(max-width: 640px)媒体查询位于 @media(max-width: 320px) 之后，较大媒体查询中相同特异性的规则将覆盖较小媒体查询中的规则。
最简单的解决方法是将媒体查询从最大屏幕尺寸到最小屏幕尺寸进行排序。
如果您需要更多控制，可以使用 min-width 的组合将媒体查询限制在一定尺寸范围内的屏幕。和max-width .
@media (min-width:320px) and (max-width: 640px) {
}
关于css - 较高分辨率的媒体查询覆盖较低分辨率的媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24900048/