0
私はそれが何かばかげたことになるだろうと確信していますが、自分で問題を見つけることができません。モバイル版CSS
は
#mobile {
display: none;
}
#desktop {
display: inline;
}
@media only screen and (max-width: 1024px) {
body {
margin: 0px;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0px;
margin: 0px;
padding: 0px;
box-shadow: none;
}
header {
border-bottom: 5px solid #fef6c2;
}
h1 {
margin-top: 0px;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 2.5em;
}
nav {
float: none;
width: auto;
padding-top: 0px;
margin: 10px;
font-size: 1.3em;
}
nav li {
display: inline-block;
}
nav a {
padding: 1em;
width: 5em;
font-weight: bold;
border-style: none;
}
nav ul,
#heroroad,
#heromugs,
#heroguitar {
margin: 0px;
padding: 0px;
}
main {
padding: 0px;
margin: 0px;
font-size: 90%;
}
}
@media only screen and (max-width: 768px) {
header {
background-image: url(images/javajammini.jpg);
height: 128px;
}
h1 {
font-size: 2em;
text-align: center;
padding-left: 0px;
}
nav {
margin: 0px;
}
nav a {
display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px #fef6c2;
}
nav li {
display: block;
}
main {
padding-top: 1px;
}
h2 {
padding: 0.5em 0em 0em 0.5em;
margin-right: 0.5em;
}
.details {
padding-left: 0px;
padding-right: 0px;
}
#heroroad,
#heromugs,
#heroguitar {
background-image: none;
height: auto;
}
.floatleft {
padding-left: 0.5em;
padding-right: 0.5em;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
* {
box-sizing: border-box;
}
header,
nav,
main,
footer {
display: block;
}
body {
background-color: #FCEBB6;
color: #221811;
font-family: Arial;
background-image: url(images/background.gif);
}
header {
background-color: #D2B48C;
height: 150px;
background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;
}
nav {
text-align: center;
font-weight: bold;
padding-top: 10px;
font-size: 1.5em;
float: left;
}
nav a {
text-decoration: none;
width: 200px;
}
nav a:link {
color: #FEF6C2;
}
nav a:visited {
color: #D2B48C;
}
nav a:hover {
color: #CC9933;
}
nav ul {
padding-left: 3em;
list-style: none;
}
main {
padding: 0em 0em 2em 0em;
display: block;
margin-left: 200px;
background-color: #FEF6C2;
}
main h2,
main h3,
main h4,
main p,
main div,
main ul,
main dl {
padding: 0em 2em 0em 3em;
}
footer {
background-color: #D2B48C;
font-style: italic;
font-size: .60em;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #221811;
border-top: 2px solid #221811;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #231814;
min-width: 900px;
max-width: 1280px;
box-shadow: 10px 10px 5px #888888;
}
h1 {
padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
h4 {
background-color: #d2b48c;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
text-transform: uppercase;
border-bottom: solid 2px black;
padding-bottom: 0em;
clear: left;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
padding-left: 10px;
padding-right: 10px;
}
#heroroad {
background-image: url(images/heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs {
background-image: url(images/heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar {
background-image: url(images/heroguitar.jpg);
background-size: 100%;
height: 250px;
}
.floatleft {
float: left;
padding: 0px 20px 20px 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- [if lt IE 9]>
<script src="html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</div>
</nav>
<main>
<div id="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally rosted free-trade coffee and home-made pastries. You'll feel rigth at home at JavaJam!</p>
<h3>JavaJam Coffee House features</h3>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<p>12312 Main Street<br>Mountain Home, CA 93923<br><a id="mobile" href="tel:1-888-555-5555">1-888-555-5555</a> <span id="desktop">1-888-555-5555</span> </p>
</main>
<footer>
<p>JavaJam Copyright © 2013 Coffee House<br><a href="[email protected]">[email protected]</a></p>
</footer>
</div>
</body>
</html>
あなたのヘルプは非常に高く評価されています...私のウェブサイトのモバイル版が、これに代えて、この My mobile version
のように見える、なぜ誰もが知ってい
パーフェクトを、試してみてください。ありがとうございました。 –
喜んで、働いている場合、答えを受け入れる:) – zed