文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >响应式设计失败

问响应式设计失败
EN

Stack Overflow用户
提问于 2018-07-27 01:21:41
回答 2查看 37关注 0票数 0

我有一个问题，试图弄清楚为什么我的手机格式的标题没有显示出来……有人能看到我看不到的东西吗？？我已经试了两个星期了，我一定是漏掉了什么。看起来我的大版本运行得很好，但我希望能得到任何帮助来解决这个问题。谢谢。

​

代码语言：javascript
复制
/* 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;
	}
}
代码语言：javascript
复制
<!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>

​

responsive-design
header
media-queries
css
mobile
EN

回答 2

Stack Overflow用户

发布于 2018-07-27 05:46:07

因为设置了dispaly: none，所以标题显示的宽度不会小于320px。

代码语言：javascript
复制
.container-header {
    display: none;
}

请将其更改为：

代码语言：javascript
复制
.container-header {
    display: block;
}
票数 0
EN

Stack Overflow用户

发布于 2018-07-27 08:21:23

看看这是否对你有帮助：

https://codepen.io/panchroma/pen/NBaNXv

记住CSS代码是级联的。如果您的样式表具有

代码语言：javascript
复制
.element{
     display:block;
}  

.....

.element{
     display:none;
}

则.element的display属性将为none。

在你的CSS代码中，你有

代码语言：javascript
复制
@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;
    }

}

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

在我的笔中，我修改了您的媒体查询，为每个查询添加了(min-width)，例如

代码语言：javascript
复制
@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) {
   ...
}

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

代码语言：javascript
复制
@media only screen and (min-width: 1441px) {
...
}  
@media only screen and (max-width: 1440px) {
...
}  
@media only screen and (max-width: 1362px) {  
...
}

希望这能有所帮助！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51544380

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档