响应式设计失败

【问题标题】：Responsive Design Fail响应式设计失败
【发布时间】：2018-07-27 08:26:45
【问题描述】：

我在试图弄清楚为什么我的移动格式上的标题没有显示时遇到了问题....任何人都可以看到我看不到的东西吗？我已经尝试了两个星期，但我一定错过了一些东西。看来我的大版本工作得很好，但如果我能在这个问题上得到任何帮助，我将不胜感激。谢谢。

/* very small mobile styles */
@media only screen and (max-width: 320px) {
	html,
	body {
		margin: 0;
		width: auto;
		background-color: #682876;
	}
	.container-header {
		display: none;
	}
	.container-header-mobile {
		height: 260px;
		width: 100%;
		position: relative;
		text-align: center;
		color: #682876;
		background-color: white;
		padding: 0;
	}
	.container-header-mobile img {
		max-height: 100px;
		min-height: 50px;
		width: auto;
	}
	.container-header-mobile a {
		text-decoration: none;
		padding: 0 5px;
	}
	main {
		text-align: center;
		color: white;
		padding: 0;
		margin: 0;
	}
	main img {
		max-width: 300px;
		height: auto;
		padding: 0;
	}
	figure {
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin: 0;
	}
	figcaption {
		position: absolute;
		font-family: "Montserrat", sans-serif;
		font-size: 1.5em;
		font-weight: bold;
		background: rgba(104, 40, 118, 0.5);
		color: #ffffff;
		padding: 20px 20px;
		opacity: 0;
		bottom: 0;
		left: -30%;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
	}
	figure:hover figcaption {
		opacity: 1;
		left: 0;
	}
	.cap-bot figcaption {
		left: 0;
		bottom: -30%;
	}
	.cap-bot:hover figcaption {
		bottom: 0;
	}
	h1 {
		font-family: "Caveat", cursive;
		font-weight: lighter;
		font-size: 0.75em;
	}
	p {
		font-family: "Montserrat", sans-serif;
		font-size: 0.5em;
	}
	main a {
		color: white;
		text-decoration: none;
	}
	.bot-social {
		margin: auto;
	}
	.bot-social img {
		border-radius: 18px;
	}
	footer {
		color: white;
		text-align: center;
		margin: 0;
		padding: 10px;
	}
	footer a {
		color: white;
		text-decoration: none;
	}
}

/* mobile portrait styles */
@media only screen and (max-width: 768px) {
	html,
	body {
		margin: 0;
		width: auto;
		background-color: #682876;
	}
	.container-header {
		display: none;
	}
	.container-header-mobile {
		height: 260px;
		width: 100%;
		text-align: center;
		position:relative;
		color: #682876;
		background-color: white;
		padding: 0;
	}
	.container-header-mobile img {
		max-height: 100px;
		min-height: 50px;
		width: auto;
	}
	.container-header-mobile a {
		text-decoration: none;
		padding: 0 5px;
	}
	main {
		text-align: center;
		color: white;
		padding: 15px 2%;
		margin: 0;
	}
	main img {
		max-width: 370px;
		height: auto;
		padding: 5px;
	}
	figure {
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin: 0;
	}
	figcaption {
		position: absolute;
		font-family: "Montserrat", sans-serif;
		font-size: 1.5em;
		background: rgba(104, 40, 118, 0.5);
		color: #ffffff;
		padding: 20px 20px;
		opacity: 0;
		bottom: 0;
		left: -30%;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
	}
	figure:hover figcaption {
		opacity: 1;
		left: 0;
	}
	.cap-bot figcaption {
		left: 0;
		bottom: -30%;
	}
	.cap-bot:hover figcaption {
		bottom: 0;
	}
	h1 {
		font-family: "Caveat", cursive;
		font-weight: lighter;
		font-size: 1em;
	}
	p {
		font-family: "Montserrat", sans-serif;
		font-size: 0.5em;
	}
	main a {
		color: white;
		text-decoration: none;
	}
	.bot-social {
		margin: auto;
	}
	.bot-social img {
		border-radius: 18px;
	}
	footer {
		color: white;
		text-align: center;
		margin: 0;
		padding: 10px;
	}
	footer a {
		color: white;
		text-decoration: none;
	}
}
/* laptop styles */
@media only screen and (max-width: 1024px) {
	html,
	body {
		margin: 0;
		width: auto;
		background-color: #682876;
	}
	.container-header-mobile {
		display: none;
	}
	.container-header {
		height: 260px;
		width: 100%;
		position: relative;
		text-align: center;
		color: #682876;
		background-color: white;
	}
	.container-header a {
		text-decoration: none;
		padding: 0 5px;
	}
	.container-header img {
		max-height: 230px;
		width: auto;
		padding-right: 12%;
	}
	.bot-social {
		display: none;
	}
	.top-left {
		position: absolute;
		top: 8px;
		left: 16px;
	}
	.top-right {
		position: absolute;
		top: 8px;
		right: 16px;
	}
	.top-left img {
		padding: 5px;
	}
	main {
		text-align: center;
		color: white;
		padding: 15px 2%;
		margin: 0;
	}
	main img {
		max-width: 370px;
		height: auto;
		padding: 10px;
	}
	figure {
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin: 0;
	}
	figcaption {
		position: absolute;
		font-family: "Montserrat", sans-serif;
		font-size: 1.5em;
		background: rgba(104, 40, 118, 0.5);
		color: #ffffff;
		padding: 20px 20px;
		opacity: 0;
		bottom: 0;
		left: -30%;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
	}
	figure:hover figcaption {
		opacity: 1;
		left: 0;
	}
	.cap-bot figcaption {
		left: 0;
		bottom: -30%;
	}
	.cap-bot:hover figcaption {
		bottom: 0;
	}
	h1 {
		font-family: "Caveat", cursive;
		font-weight: lighter;
		font-size: 2em;
	}
	p {
		font-family: "Montserrat", sans-serif;
		font-size: 1em;
	}
	main a {
		color: white;
		text-decoration: none;
	}
	.bot-social {
		margin: auto;
	}
	footer {
		color: white;
		text-align: center;
		margin: 0;
		padding: 10px;
	}
	footer a {
		color: white;
		text-decoration: none;
	}
}
/* large laptop styles */
@media only screen and (max-width: 1362px) {
	html,
	body {
		margin: 0;
		width: auto;
		background-color: #682876;
	}
	.container-header-mobile {
		display: none;
	}
	.container-header {
		height: 260px;
		width: 100%;
		position: relative;
		text-align: center;
		color: #682876;
		background-color: white;
	}
	.container-header a {
		text-decoration: none;
		padding: 0 5px;
	}
	.container-header img {
		max-height: 230px;
		width: auto;
		padding-right: 12%;
	}
	.bot-social {
		display: none;
	}
	.top-left {
		position: absolute;
		top: 8px;
		left: 16px;
	}
	.top-right {
		position: absolute;
		top: 8px;
		right: 16px;
	}
	.top-left img {
		padding: 5px;
	}
	main {
		text-align: center;
		color: white;
		padding: 15px 2%;
		margin: 0;
	}
	main img {
		width: 236px;
		height: auto;
		padding: 10px;
	}
	figure {
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin: 0;
	}
	figcaption {
		position: absolute;
		font-family: "Montserrat", sans-serif;
		font-size: 1.5em;
		background: rgba(104, 40, 118, 0.5);
		color: #ffffff;
		padding: 20px 20px;
		opacity: 0;
		bottom: 0;
		left: -30%;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
	}
	figure:hover figcaption {
		opacity: 1;
		left: 0;
	}
	.cap-bot figcaption {
		left: 0;
		bottom: -30%;
	}
	.cap-bot:hover figcaption {
		bottom: 0;
	}
	h1 {
		font-family: "Caveat", cursive;
		font-weight: lighter;
		font-size: 2em;
	}
	p {
		font-family: "Montserrat", sans-serif;
		font-size: 1em;
	}
	main a {
		color: white;
		text-decoration: none;
	}
	.bot-social {
		margin: auto;
	}
	footer {
		color: white;
		text-align: center;
		margin: 0;
		padding: 10px;
	}
	footer a {
		color: white;
		text-decoration: none;
	}
}
/* desktop styles */
@media only screen and (max-width: 1440px) {
	html,
	body {
		margin: 0;
		width: auto;
		background-color: #682876;
	}
	.container-header-mobile {
		display: none;
	}
	.container-header {
		height: 260px;
		width: 100%;
		position: relative;
		text-align: center;
		color: #682876;
		background-color: white;
	}
	.container-header a {
		text-decoration: none;
		padding: 0 5px;
	}
	.container-header img {
		max-height: 230px;
		width: auto;
		padding-right: 12%;
	}
	.bot-social {
		display: none;
	}
	.top-left {
		position: absolute;
		top: 8px;
		left: 16px;
	}
	.top-right {
		position: absolute;
		top: 8px;
		right: 16px;
	}
	.top-left img {
		padding: 5px;
	}
	main {
		text-align: center;
		color: white;
		padding: 15px 2%;
		margin: 0;
	}
	main img {
		max-width: 500px;
		height: auto;
		padding: 10px;
	}
	figure {
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin: 0;
	}
	figcaption {
		position: absolute;
		font-family: "Montserrat", sans-serif;
		font-size: 1.5em;
		background: rgba(104, 40, 118, 0.5);
		color: #ffffff;
		padding: 20px 20px;
		opacity: 0;
		bottom: 0;
		left: -30%;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
	}
	figure:hover figcaption {
		opacity: 1;
		left: 0;
	}
	.cap-bot figcaption {
		left: 0;
		bottom: -30%;
	}
	.cap-bot:hover figcaption {
		bottom: 0;
	}
	h1 {
		font-family: "Caveat", cursive;
		font-weight: lighter;
		font-size: 2em;
	}
	p {
		font-family: "Montserrat", sans-serif;
		font-size: 1em;
	}
	main a {
		color: white;
		text-decoration: none;
	}
	.bot-social {
		margin: auto;
	}
	footer {
		color: white;
		text-align: center;
		margin: 0;
		padding: 10px;
	}
	footer a {
		color: white;
		text-decoration: none;
	}
}
/* HD styles */
@media only screen and (min-width: 1441px) {
	html,
	body {
		margin: 0;
		width: auto;
		background-color: #682876;
	}
	.container-header-mobile {
		display: none;
	}
	.container-header {
		height: 260px;
		width: 100%;
		position: relative;
		text-align: center;
		color: #682876;
		background-color: white;
	}
	.container-header a {
		text-decoration: none;
		padding: 0 5px;
	}
	.container-header img {
		max-height: 230px;
		width: auto;
		padding-right: 12%;
	}
	.bot-social {
		display: none;
	}
	.top-left {
		position: absolute;
		top: 8px;
		left: 16px;
	}
	.top-right {
		position: absolute;
		top: 8px;
		right: 16px;
	}
	.top-left img {
		padding: 5px;
	}
	main {
		text-align: center;
		color: white;
		padding: 15px 2%;
		margin: 0;
	}
	main img {
		max-width: 300%;
		height: auto;
		padding: 10px;
	}
	figure {
		display: inline-block;
		position: relative;
		overflow: hidden;
		margin: 0;
	}
	figcaption {
		position: absolute;
		font-family: "Montserrat", sans-serif;
		font-size: 1.5em;
		background: rgba(104, 40, 118, 0.5);
		color: #ffffff;
		padding: 20px 20px;
		opacity: 0;
		bottom: 0;
		left: -30%;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
	}
	figure:hover figcaption {
		opacity: 1;
		left: 0;
	}
	.cap-bot figcaption {
		left: 0;
		bottom: -30%;
	}
	.cap-bot:hover figcaption {
		bottom: 0;
	}
	h1 {
		font-family: "Caveat", cursive;
		font-weight: lighter;
		font-size: 2em;
	}
	p {
		font-family: "Montserrat", sans-serif;
		font-size: 1em;
	}
	main a {
		color: white;
		text-decoration: none;
	}
	.bot-social {
		margin: auto;
	}
	footer {
		color: white;
		text-align: center;
		margin: 0;
		padding: 10px;
	}
	footer a {
		color: white;
		text-decoration: none;
	}
}
<!DOCTYPE html>
<html lang="en">

<head>
		<title>Volume Salon Westlake</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css?family=Caveat|Montserrat" rel="stylesheet">
		<link rel="stylesheet" href="normalize.css">
		<link rel="stylesheet" href="main.css">
</head>

<body>

		<header>
				<div class="container-header">
						<div class="top-left">
								<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
	</a>
								<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
	</a>
						</div>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo">
						<div class="top-right">
								<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
						</div>
				</div>
				<div class="container-header-mobile">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo"><br>
						<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
				</div>

		</header>

		<main>
				<div>
						<h1>Volume Salon, located in Westlake, Ohio is... To view offered services and schedule an appointment with one of our independent sylists, visit the links below:</h1>
				</div>
				<div>
						<figure class="cap-bot">
								<a href="Nikki.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nikki.png" alt="Nikki"></a>
								<figcaption>Nikki</figcaption>
						</figure>
						<figure class="cap-bot">
								<a href="Kevin.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kevin.png" alt="Kevin"></a>
								<figcaption>Kevin</figcaption>
						</figure>
						<figure class="cap-bot">
								<a href="Kelley.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kelley2.png" alt="Kelley"></a>
								<figcaption>Kelley</figcaption>
						</figure>
						<figure class="cap-bot">
								<a href="Anne-Marie.html"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/anne-marie.jpg" alt="Anne-Marie"></a>
								<figcaption>Anne-Marie</figcaption>
						</figure>
				</div>
				<div class="bot-social">
						<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
	</a>
						<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
	</a>
				</div>
				<br><br><br>
		</main>

		<footer>
				<p>&copy; 2018 Volume Salon</p>
				<p>Made with &hearts; by <a href="https://codepen.io/valsburger/" target="_blank">Valarie Pisarcik</a></p>
		</footer>

</body>

</html>

【问题讨论】：

    标签： css mobile responsive-design header media-queries


    【解决方案1】：

    由于您设置了dispaly: none，因此您的标题显示的宽度不会小于320px。

    .container-header {
    display: none;
}

    请改成：

    .container-header {
    display: block;
}

    【讨论】：

      【解决方案2】：

      看看这对你有没有帮助：
      https://codepen.io/panchroma/pen/NBaNXv

      请记住 CSS 代码级联。如果你的样式表有 

      .element{
     display:block;
}  

.....

.element{
     display:none;
}

      那么 .element 的显示属性将为无。

      在你的 CSS 代码中有 

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

    .container-header-mobile {
        height: 260px;
        width: 100%;
        position: relative;
        text-align: center;
        color: #682876;
        background-color: white;
        padding: 0;
    }

}

...

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

    .container-header-mobile {
        display: none;
    }

}

      有两种方法可以阻止一个媒体查询覆盖另一个。

      在我的笔中，我修改了您的媒体查询，为每个查询添加了一个（最小宽度），例如 

      @media only screen and (max-width: 320px) {  
  ...
}  
@media only screen and (min-width: 321px) and (max-width: 768px) {  
  ...
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
   ...
}

      另一种选择是颠倒媒体查询的顺序，首先是桌面视口，最后是移动视口：

      @media only screen and (min-width: 1441px) {
...
}  
@media only screen and (max-width: 1440px) {
...
}  
@media only screen and (max-width: 1362px) {  
...
}

      希望这会有所帮助！

      【讨论】：

        猜你喜欢
        • 2016-04-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-12-28
        • 2016-01-08
        • 2021-06-17
        • 2021-06-09
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode