媒体查询可视错误，意外行为移动回复
我正在做一项应该产生以下结果的家庭作业：
在桌面上：
在移动设备上
平板电脑：
现在我正在获得正确的桌面组件，但移动组件根本没有正确加载。
以下是我的结果在平板电脑上的显示方式的一些屏幕截图：
在移动设备上
我的代码并没有确切地知道我哪里出错了。附件是我正在使用的CSS和HTML。
任何关于错误的线索都会对我有所帮助。我正在使用谷歌浏览器，微软边缘和歌剧模拟器进行测试。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
/* pacific.css for assignment #5 by Caleb Latimer*/
*{
box-sizing: border-box;
}
body{
background-color: #FFFFFF;
color : #666666;
font-family: Verdana;
background-image: url(images/background.jpg);
}
h1{
background-color: #000033;
color : #FFFFFF;
font-family: Georgia;
line-height: 200%;
background-image: url(images/sunset.jpg);
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
background-position: right;
}
h2{
color: #3399CC;
font-family: Georgia;
}
dt{
color: #000033;
font-weight: bold;
}
.resort{
color: #000033;
font-size: 1.2em;
}
footer{
font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
margin-left: 170px;
}
#wrapper{
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #90C7E3;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #828282;
}
h3{
color: #000033;
}
main{
padding-left: 20px;
padding-right: 20px;
display:block;
}
#homehero{
height: 300px;
background-image: url(images/coast.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
#yurthero{
height: 300px;
background-image: url(images/yurt.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
#trailhero{
height: 300px;
background-image: url(images/trail.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
nav ul li a{
text-decoration: none;
}
nav a:link{
color: #000033;
}
nav a:visited{
color: #344873;
}
nav a:hover{
color: #FFFFFF;
}
.left-column{
font-weight: bold;
background-color: inherit;
float: left;
width: 160px;
/*padding-top: 20px 5px 0 20px; works for some reason?*/
padding-top: 20px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
}
.left-column ul li{
list-style: none;
list-style-type: none;
margin: 0;
padding-left: 0;
}
.right-column{
background-color: #FFFFFF;
margin-left: 170px;
padding-top: 1px;
padding-bottom: 1px;
}
header,nav,main,footer{
display: block;
}
#mobile{
display: none;
}
#desktop{
display: inline;
}
/* CSS media queries below */
@media only screen and (max-width: 1024px){
body{
margin: 0;
padding: 0;
background-image: none;
}
#wrapper{
width:auto;
min-width: 0;
margin:0;
box-shadow: none;
}
h1{
margin: 0;
}
nav{
float:none;
width:auto;
padding: 0.5em;
}
nav li{
display:inline-block;
}
nav a{
padding: 1em;
}
main{
padding: 1em;
margin-left: 0;
font-size: 90%;
}
footer{
margin:0;
}
#homehero{
margin-left: 0;
}
#yurthero{
margin-left: 0;
}
#trailhero{
margin-left: 0;
}
}
@media only all and (max-width: 768px){
h1{
height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
}
nav{
padding: 0;
}
nav ul{
margin: 0;
padding: 0;
}
nav li{
display: block;
margin: 0;
padding: 0;
}
nav a{
display: block;
padding:0.2em;
font-size:1.3em;
border-bottom-width: 1px;
border-bottom-color: #330000;
}
main{
padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em;
}
#homehero{
display: none;
}
#yurthero{
display:none;
}
#trailhero{
display:none;
}
footer{
padding: 0;
}
#mobile{
display: inline;
}
#desktop{
display: none;
}
}<!-- Chapter 5 Homework by Caleb Latimer -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort</title>
<!-- [if lt IE 9]>
<script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
<link rel="stylesheet" href="pacific.css" /> <!-- Uses the pacific.css stylesheet inside of folder -->
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- viewport tag configuration -->
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav class = "left-column">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="yurts.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a> </li><!-- Doesn't lead anywhere no requirements given -->
</ul>
</nav>
<div id ="homehero"></div>
<main class = "right-column">
<h2>Enjoy Nature in Luxury</h2>
<p>
<span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span> <br />
12010 Pacific Trails Road <br />
Zephyr, CA 95555<br /><br />
<a id="mobile" href="tel:888-555-5555">888-555-5555</a><br />
<span id="desktop">888-555-5555</span>
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort <br />
<a href = "mailto:Caleb@Latimer.com">Caleb@Latimer.com</a>
</footer>
</div>
</body>
</html>
1 个答案:
答案 0 :(得分：0)
我解决了自己的问题，问题在于媒体查询。我有css定义.left-column＆amp; .right-column但我从未在适当的查询环境中覆盖它。下面是修改后的CSS，它解决了这个问题：
/* pacific.css for assignment #5 by Caleb Latimer*/
*{
box-sizing: border-box;
}
body{
background-color: #FFFFFF;
color : #666666;
font-family: Verdana;
background-image: url(images/background.jpg);
}
h1{
background-color: #000033;
color : #FFFFFF;
font-family: Georgia;
line-height: 200%;
background-image: url(images/sunset.jpg);
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
background-position: right;
}
h2{
color: #3399CC;
font-family: Georgia;
}
dt{
color: #000033;
font-weight: bold;
}
.resort{
color: #000033;
font-size: 1.2em;
}
footer{
font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
margin-left: 170px;
}
#wrapper{
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #90C7E3;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #828282;
}
h3{
color: #000033;
}
main{
padding-left: 20px;
padding-right: 20px;
display:block;
}
#homehero{
height: 300px;
background-image: url(images/coast.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
#yurthero{
height: 300px;
background-image: url(images/yurt.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
#trailhero{
height: 300px;
background-image: url(images/trail.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
nav ul li a{
text-decoration: none;
}
nav a:link{
color: #000033;
}
nav a:visited{
color: #344873;
}
nav a:hover{
color: #FFFFFF;
}
.left-column{
font-weight: bold;
background-color: inherit;
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
}
.left-column ul li{
list-style: none;
list-style-type: none;
margin: 0;
padding-left: 0;
}
.right-column{
background-color: #FFFFFF;
margin-left: 170px;
padding-top: 1px;
padding-bottom: 1px;
}
header,nav,main,footer{
display: block;
}
#mobile{
display: none;
}
#desktop{
display: inline;
}
/* CSS media queries below */
@media only screen and (max-width: 1024px){
body{
margin: 0;
padding: 0;
background-image: none;
}
#wrapper{
width:auto;
min-width: 0;
margin:0;
box-shadow: none;
}
h1{
margin: 0;
}
nav ul{
padding-left: 0px;
}
nav{
float:none;
width:auto;
padding: 0.5em;
}
nav li{
display:inline-block;
}
nav a{
padding: 1em;
}
main{
padding: 1em;
margin-left: 0;
font-size: 90%;
}
footer{
margin:0;
}
#homehero{
margin-left: 0;
}
#yurthero{
margin-left: 0;
}
#trailhero{
margin-left: 0;
}
.left-column{
font-weight: bold;
background-color: inherit;
float: none;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
width: 100%;
}
.right-column{
background-color: #FFFFFF;
margin-left: 0px;
padding-top: 1px;
padding-bottom: 1px;
}
}
@media only all and (max-width: 768px){
h1{
height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
}
nav{
padding: 0;
}
nav a{
display: block;
padding:0.2em;
font-size:1.3em;
}
nav ul{
margin: 0;
padding: 0;
}
nav li{
display: block;
margin: 0;
padding: 0;
border: solid;
border-width: 1px;
border-color: #330000;
}
main{
padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em;
}
#homehero{
display: none;
}
#yurthero{
display:none;
}
#trailhero{
display:none;
}
footer{
padding: 0;
}
#mobile{
display: inline;
}
#desktop{
display: none;
}
.left-column{
font-weight: bold;
background-color: inherit;
float: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position:relative;
width: 100%;
}
.right-column{
background-color: #FFFFFF;
margin-left: 0px;
padding-top: 1px;
padding-bottom: 1px;
}
}
这里是片段
＆＃13;
＆＃13;
＆＃13;
＆＃13;
/* pacific.css for assignment #5 by Caleb Latimer*/
*{
box-sizing: border-box;
}
body{
background-color: #FFFFFF;
color : #666666;
font-family: Verdana;
background-image: url(images/background.jpg);
}
h1{
background-color: #000033;
color : #FFFFFF;
font-family: Georgia;
line-height: 200%;
background-image: url(images/sunset.jpg);
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
background-position: right;
}
h2{
color: #3399CC;
font-family: Georgia;
}
dt{
color: #000033;
font-weight: bold;
}
.resort{
color: #000033;
font-size: 1.2em;
}
footer{
font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
margin-left: 170px;
}
#wrapper{
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #90C7E3;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #828282;
}
h3{
color: #000033;
}
main{
padding-left: 20px;
padding-right: 20px;
display:block;
}
#homehero{
height: 300px;
background-image: url(images/coast.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
#yurthero{
height: 300px;
background-image: url(images/yurt.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
#trailhero{
height: 300px;
background-image: url(images/trail.jpg);
background-size: 100% 100%;
margin-left: 170px;
}
nav ul li a{
text-decoration: none;
}
nav a:link{
color: #000033;
}
nav a:visited{
color: #344873;
}
nav a:hover{
color: #FFFFFF;
}
.left-column{
font-weight: bold;
background-color: inherit;
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
position: relative;
}
.left-column ul li{
list-style: none;
list-style-type: none;
margin: 0;
padding-left: 0;
}
.right-column{
background-color: #FFFFFF;
margin-left: 170px;
padding-top: 1px;
padding-bottom: 1px;
}
header,nav,main,footer{
display: block;
}
#mobile{
display: none;
}
#desktop{
display: inline;
}
/* CSS media queries below */
@media only screen and (max-width: 1024px){
body{
margin: 0;
padding: 0;
background-image: none;
}
#wrapper{
width:auto;
min-width: 0;
margin:0;
box-shadow: none;
}
h1{
margin: 0;
}
nav ul{
padding-left: 0px;
}
nav{
float:none;
width:auto;
padding: 0.5em;
}
nav li{
display:inline-block;
}
nav a{
padding: 1em;
}
main{
padding: 1em;
margin-left: 0;
font-size: 90%;
}
footer{
margin:0;
}
#homehero{
margin-left: 0;
}
#yurthero{
margin-left: 0;
}
#trailhero{
margin-left: 0;
}
.left-column{
font-weight: bold;
background-color: inherit;
float: none;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
width: 100%;
}
.right-column{
background-color: #FFFFFF;
margin-left: 0px;
padding-top: 1px;
padding-bottom: 1px;
}
}
@media only all and (max-width: 768px){
h1{
height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
}
nav{
padding: 0;
}
nav a{
display: block;
padding:0.2em;
font-size:1.3em;
}
nav ul{
margin: 0;
padding: 0;
}
nav li{
display: block;
margin: 0;
padding: 0;
border: solid;
border-width: 1px;
border-color: #330000;
}
main{
padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em;
}
#homehero{
display: none;
}
#yurthero{
display:none;
}
#trailhero{
display:none;
}
footer{
padding: 0;
}
#mobile{
display: inline;
}
#desktop{
display: none;
}
.left-column{
font-weight: bold;
background-color: inherit;
float: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
position:relative;
width: 100%;
}
.right-column{
background-color: #FFFFFF;
margin-left: 0px;
padding-top: 1px;
padding-bottom: 1px;
}
}<!-- Chapter 5 Homework by Caleb Latimer -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort</title>
<!-- [if lt IE 9]>
<script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
<link rel="stylesheet" href="pacific.css" /> <!-- Uses the pacific.css stylesheet inside of folder -->
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- viewport tag configuration -->
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav class = "left-column">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="yurts.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a> </li><!-- Doesn't lead anywhere no requirements given -->
</ul>
</nav>
<div id ="homehero"></div>
<main class = "right-column">
<h2>Enjoy Nature in Luxury</h2>
<p>
<span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span> <br />
12010 Pacific Trails Road <br />
Zephyr, CA 95555<br /><br />
<a id="mobile" href="tel:888-555-5555">888-555-5555</a><br />
<span id="desktop">888-555-5555</span>
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort <br />
<a href = "mailto:Caleb@Latimer.com">Caleb@Latimer.com</a>
</footer>
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？