0
シンプルなHTML/CSSサイトを初めて作成しようとしています。携帯電話やタブレット用に調整しようとしています。モバイルでのみフロートをクリアするにはどうすればよいですか？そして、タブレット用のメディアクエリを削除すると、モバイル用のメディアクエリが影響を受けるのはなぜですか？
しかし、水平位置に設定されている電話機に表示されているときは、ナビゲーションバーの横にメインコンテンツが表示されています。私は、メディアクエリでフロートをクリアする方法を知らない。
また、CSSからタブレットメディアクエリを削除すると、携帯電話のメディアクエリに影響します。何故ですか？
body {
background-color: #EBF0DF;
color: #000000;
margin-bottom: 0;
font-family: Verdana, Arial, sans-serif;
}
h1 {
font-family: Papyrus, serif;
font-size: 40px;
background-color: #A8BF78;
color: #000000;
text-align: center;
background-image: url(../site_assets/logo.png);
background-repeat: no-repeat;
background-position: 8%;
background-size: 145px;
margin-left: 110px;
margin-right: 110px;
height: 150px;
line-height: 400%;
margin-bottom: 15px;
border-radius: 30px;
margin-top: 10px;
}
h2 {
font-family: Georgia, serif;
}
header, nav, main, footer {
display: block;
}
nav {
text-align: center;
font-size: 25px;
margin-bottom: 25px;
margin-top: 25px;
}
nav a {
text-decoration: none;
border: 4px outset #CEDAB3;
border-radius: 5px;
color: #84A540;
font-family: Verdana;
padding: 5px;
}
nav a:link {
color: #84A540;
}
nav a:visited {
color: #A8BF78;
}
nav a:hover {
color: #CEDBB3;
}
footer {
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-family: Verdana, sans-serif;
font-style: italic;
font-size: 13px;
background-color: #CEDBB3;
}
#portlandimage {
margin-top: 40px;
margin-left: 10px;
}
#wrapper {
width: 90%;
min-width: 1200px;
max-width: 1480px;
margin-right: auto;
margin-left: auto;
}
@media only screen and (max-width: 1024px) {
body {
margin: 0;
padding: 0;
background-image: none;
}
h1 {
margin: 0;
}
nav {
float: none;
width: auto;
padding: 0.5em;
}
nav a {
padding: 1em;
}
main {
padding: 1em;
margin-left: 0;
font-size: 90%;
}
footer {
margin: 0;
}
#wrapper {
width: auto;
min-width: 0;
margin: 0;
box-shadow: none;
}
}
@media only all and (max-width: 768px) {
h1 {
height: 100%;
font-size: 1.5em;
background-image: none;
border-radius: 0;
margin: 0;
text-align: center;
}
nav {
padding: 0;
}
nav a {
float: left;
padding: 0.5em;
width: 75%;
min-width: 6em;
margin-left: 0.8em;
margin-right: 0.5em;
}
main {
padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em;
}
footer {
padding-top: 1em;
padding-bottom: 1em;
font-style: normal;
}
#portlandimage {
display: none;
}
#wrapper {
margin-right: auto;
margin-left: auto;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Portland Historical Tours</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="styles/historical_tours_styles.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="wrapper">
<header>
<h1>Portland Historical Tours</h1>
</header>
<nav>
<a href="project/template.html">Home</a>
<a href="project/tours.html">Tours</a>
<a href="project/about.html">About Us</a>
<a href="project/contact.html">Contact</a>
</nav>
<main>
<img alt="Portland, Oregon" height="460" id="portlandimage"
src="site_assets/portland_historical_tours.jpg" style="float: right;" width="620">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
cursus ipsum eget mattis.</p>
<h2>Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit
purus risus, mattis efficitur augue suscipit ut. Etiam lobortis auctor
felis, a dignissim erat iaculis eu. Praesent et elit eu lectus lacinia
posuere id in nisl. Aenean faucibus, massa eget eleifend rutrum, lectus
diam ullamcorper mauris, vitae semper ligula dui et mauris. Nullam
vulputate sem tincidunt elementum molestie. Fusce dignissim tristique
rutrum. Proin gravida mi quam. Nam non eros a mauris aliquam blandit sit
amet sed magna. Fusce auctor leo diam, eu pellentesque orci auctor id.
Mauris tempor nulla ligula, sed rutrum tortor dictum sed. Morbi mollis
cursus ipsum eget mattis.</p>
</main><br>
<br>
<footer>
Copyright © 2017 Portland Historical Tours<br>
<a href="mailto:[email protected]">[email protected]</a>
</footer>
</body>
</html>
_「メディアクエリで浮動小数点をどのようにクリアするかわからない」 - メディアクエリの外側と同じ方法... – CBroe
minを設定していないため、これはすべてのデバイスがXpxまで可能であることを意味します - デバイスタイプをよりよく区別できるように分を設定してください – ThisGuyHasTwoThumbs