-1
純粋なHTMLとCSSと崇高なテキストを使用して最初からウェブサイトを作成したので、私のポートフォリオに潜在的な雇用主を表示するためにこのサイトを作成しました。私はこの分野では新しく、まだ仕事をしていないので、私は自分自身に誇示するための個人的なプロジェクトを与えています。サイトのすべてが正しく動作していますが、今はモバイルフレンドリーにしたいと考えています。レスポンシブデザインの周りに私の頭（とこのサイト）を包む
私はYoutubeの件名でビデオを見て取得した知識を使って、いくつかのブレークポイントを追加しました。しかし、どのように私は特定の画面のすべての可能な幅と高さをターゲットにするのですか？たとえば、320pxの幅であれば上手く見えます。私はヘッダーのイメージを取り除き、フッタを修正するが、321px幅に達するとすぐにすべてが絡み合っていく。私の質問は、私はそれをどのように矯正するのですか？すべてを対象とするメディアのクエリでは何ができますか？
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-image: url(../images/bg.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
}
/*------------------Header Styling------------------*/
header {
background-color: white;
border-bottom-style: solid;
overflow: auto;
height: 200px;
font-family: "Freehand521 BT", Arial, Sans-serif;
}
header p {
font-family: "Freehand521 BT", Arial, Sans-serif;
margin: 20px 0px 0px 20px;
font-size: 60px;
}
header img {
float: right;
border-left: solid;
}
/*------------------Main Nav Styling------------------*/
#mainlinks {
margin-top: 60px;
}
#mainlinks ul {
margin-bottom: 0px;
}
#mainlinks a {
list-style-type: none;
text-decoration: none;
color: black;
margin-right: 90px;
margin-left: -10px;
font-size: 25px;
}
#mainlinks a:hover {
color: #D423A2;
transition: all 0.5s;
}
#mainlinks li {
display: inline;
padding-right: 5px;
}
/*------------------Secondary Nav Styling------------------*/
.secondlinks li {
display: inline;
list-style-type: none;
}
.secondlinks ul {
padding-left: 0px;
}
.secondlinks a {
margin-right: 30px;
text-decoration: none;
color: black;
}
.secondlinks a:hover {
color: #7A0A56;
transition: ease-in-out 0.7s;
}
.secondlinks a#moon:hover {
color: #FFE619;
transition: ease-in-out 0.7s;
}
.secondlinks a#mars:hover {
color: #E30000;
transition: ease-in-out 0.7s;
}
.secondlinks a#mercury:hover {
color: #1BB9EB;
transition: ease-in-out 0.7s;
}
.secondlinks a#jupiter:hover {
color: #21EB47;
transition: ease-in-out 0.7s;
}
.secondlinks a#venus:hover {
color: #F7B20F;
transition: ease-in-out 0.7s;
}
/*------------------Main Content Styling------------------*/
#contentwrap {
background-color: rgba(231, 231, 231, .7);
border-style: solid;
border-radius: 10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 150px;
padding: 15px;
padding-bottom: 50px;
min-height: 100%;
font-family: "Freehand521 BT", Arial, Sans-serif;
font-size: 17px;
}
#contentwrap img {
border-style: solid;
}
.top {
text-align: center;
color: black;
text-decoration: none;
}
.top :hover {
color: #D423A2;
transition: all 0.5s;
}
/*------------------Footer Styling------------------*/
footer {
background-color: #fff;
border-top-style: solid;
margin-top: -130px;
width: 100%;
height: 130px;
font-family: "Freehand521 BT", Arial, Sans-serif;
font-size: 15px;
position: relative;
clear: both;
}
#footernav {
float: right;
}
#footernav li {
display: inline;
}
#footernav a {
color: black;
text-decoration: none;
margin-right: 30px;
}
#footernav a:hover {
color: #D423A2;
transition: all 0.5s;
}
#copyright {
position: absolute;
left: 550px;
bottom: 30px;
}
/*------------------Media Queries for Responsive Design------------------*/
@media screen and (max-width:960px) {
#header {
width: auto;
}
#contentwrap {
width: auto;
}
#footer {
width: auto;
}
#copyright {
left: 300px;
}
}
@media screen and (max-width: 812px) {
header p {
font-size: 50px;
}
#copyright {
left: 250px;
}
}
@media screen and (max-width: 320px) {
header p {
font-size: 29px;
}
#mainlinks a{
font-size: 20px;
margin-right: 15px;
}
header img {
width: 0px;
height: 0px;
}
#copyright {
left: 100px;
font-size: 10px;
}
#pharaoh_90_content img {
width: 100%;
}
#queen_nehelenia_content img {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Defenders Of The Stars!--The Official Sailor Moon Fanpage!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="images/SM.ico">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="style/normalize.css">
</head>
<body>
<header>
<img src="images/HeaderSilouette.png" alt="Defenders Of The Stars Header" width="200" height="200">
<p>Defenders of the stars!</p>
<nav id="mainlinks">
<ul>
<li><a href="main.html">Home</a></li>
<li><a href="ss.html">Sailor Senshi</a></li>
<li><a href="villains.html">Villains</a></li>
</ul>
</nav>
</header>
<div id="contentwrap">
<h1> Welcome Fans!</h1>
<p>Welcome to the Official Sailor Moon Fanpage! Here you will find a lot of information about the Sailor Moon Universe! Including Characters and villains alike, As well as an overview of the story so far. We will also keep this Page updated with the latest happenings in the world of Sailor Moon!</p>
<p><u>July 5 2014</u> - New Sailor Moon Anime, Sailor Moon Crystal is released!</p>
</div>
<footer>
<p id ="copyright">© Copyright 2016 Jorge Goris.<br />Designed and developed by Jorge Goris.</p>
<nav id="footernav">
<ul>
<li><a href="main.html">Home</a></li>
<li><a href="ss.html">Sailor Senshi</a></li>
<li><a href="villains.html">Villains</a></li>
</ul>
</nav>
</footer>
</body>
</html>
私はあなたが既に試みているかについての詳細を話し、多分少しダウンあなたの質問を絞り込むことが必要だと思います。あなたはここで一つの質問であまりにも多くを求めています。 – natel