这是一个家庭作业。我需要为我已经制作的网站使用现有代码,并使其与移动设备查看兼容。他们希望我通过添加响应式设计元素来做到这一点。目前,桌面网站是两列格式。对于移动显示,该网站应该转换为单列格式。当我打开网站时,我的手机仍将显示为两列布局。
我已经使用CSS和HTML验证器检查了所有内容。未检测到错误。我沿着书籍说明逐步遵循,必须包括他们告诉我的所有内容,但由于某种原因,它仍然无法在移动设备上正确显示。(我还测试了问题是否仅仅是iPhone或Android问题。这两个设备均未正确显示该网站(。
第一个代码的示例是HTML的代码显示我确实在头部使用了元标记。第二个代码是我的外部CSS,它具有媒体查询。
<!DOCTYPE html>
<html lang="en">
<head>
<title> Fish Creek Animal Clinic </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fishcreek.css">
</head>
<body>
<div id="wrapper">
<header>
<h1> Fish Creek Animal Clinic </h1>
</header>
<nav>
<ul>
<li><a href="index.html"> Home</a></li>
<li><a href="services.html"> Services</a></li>
<li><a href="askvet.html"> Ask The Vet</a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</nav>
<main>
<dl>
<dt>Full Service Facility</dt>
<dd>Doctors and staff are on duty 24 hours a day, 7 days a week.<dd>
<dt>Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984.</dd>
<dt>Open Door Policy</dt>
<dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd>
</dl>
<div>
<a id="mobile" href="tel:800-555-5555">800-555-5555</a><br>
<span id="desktop">800-555-5555</span><br>
1242 Grassy Lane<br>
Fish Creek, WI 55534<br><br>
</div>
</main>
<footer>
Copyright © 2018 Fish Creek Animal Clinic. All Rights Reserved.<br>
<a href="mailto:jescobedo3@saddleback.edu"> jescobedo3@saddleback.edu </a>
</footer>
</div>
</body>
</html>
@media only screen and (max-width: 1024px) {
body {margin: 0;
padding: 0;
background-color: white;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
}
h1 {
margin: 0;
font-size: 1.8em;
line-height: 200%;
}
nav {
float: none;
padding: 0;
width: auto;
}
nav li {display: inline-block;}
nav a {
padding: 1em;
font-size: 1.2em;
}
nav ul {
text-align: center;
padding: 0;
margin: 0;
}
main {
font-size: 90%;
margin: 0;
padding-left: 2em;
}
footer {margin: 0;}
}
@media only screen and (max-width: 768px) {
header {background-image: url(lilfish.gif)}
h1 {
font-size: 1.5em;
line-height: 120%;
}
nav a {
display: block;
padding: 0.2em;
font-size: 1em;
border-bottom: 1px solid #330000;
}
nav li {display: block;}
nav ul {text-align: left;}
main {padding-left: 1em;}
.category {text-shadow: none;}
#mobile {display: inline;}
#desktop {display: none;}
}
我认为您可以使用媒体查询来适用于不同尺寸,也可以根据设备的方向使用。
<style>
/* For Device Size */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* For Device Orientation */
/* According to Mobile Orientation */
@media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
</style>