-1
Итак, я создал сайт с нуля, просто используя чистый HTML и CSS и возвышенный текст, я создал этот сайт для отображения в моем портфолио, чтобы показать потенциальных работодателей. Я новичок в этой области, и я еще не приземлился на работу, поэтому я даю себе личные проекты, чтобы хвастаться. Все на сайте работает правильно, но теперь я хочу сделать его мобильным.Обтекание моей головы (и этого сайта) вокруг отзывчивого дизайна
Я добавил несколько точек останова, используя знания, которые я приобрел, просматривая видео по теме на Youtube. Однако как настроить таргетинг на каждую возможную ширину и высоту экрана? Например, при ширине 320 пикселей она выглядит нормально. Я забираю изображение в заголовке и фиксирую нижний колонтитул, но как только я нажму 321 px в ширину, все пойдет поскорее. Мой вопрос: как мне это исправить? что я могу сделать в своих медиа-запросах, чтобы настроить все? Вот код:
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