3
Iv'e пытался понять это в течение последних нескольких дней. Я уже несколько месяцев склоняюсь к HTML и CSS, поэтому я все еще совершенно новый. В CSS у меня есть позиция, абсолютная со всеми позициями в процентах. Должен ли я писать разные документы CSS для разных резолюций? На данный момент я основываю все, начиная с 1920 X 1080. Из того, что я понимаю, мне нужно что-то вроде отзывчивого макета, но я не могу понять, как туда добраться. Я узнал о Codecademy, где я сделал страницу airbnb и, похоже, очень хорошо подстраивался под разные разрешения. Iv'e посмотрел на это, поэтому я думаю, что это может быть просто что-то, чего я не вижу. Спасибо!Оптимизация сайта для разных разрешений
Если вы запустите код ниже в 1080p, он будет выглядеть нормально, тогда как любой более низкий он будет перемешаться повсюду.
html,
body {
margin: 0;
padding: 0;
}
.container {
width: 640px;
margin: 0 auto;
}
/*start of header*/
.header {
background: #8A0808;
}
.nav {
margin: 0;
padding: 20px 0;
}
.nav li {
display: inline;
}
.nav a {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 15px;
display: inline;
text-transform: uppercase;
margin-left: 25px;
text-decoration: none;
}
/*end of header*/
/*start of central box*/
.centralbox {
width: 65%;
height: 150%;
position: absolute;
top: 6%;
left: 17.5%;
background-color: #151515;
}
/*end of central box*/
/*start of logo*/
.logo {
width: 22%;
height: 16%;
position: absolute;
top: 7%;
left: 21%;
}
/*end of logo*/
/*start of h1*/
.h1 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 20%;
left: 42.5%;
text-decoration: underline;
}
/*end of h1*/
/*start of introduction1*/
.introduction1 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 21%;
top: 27%;
width: 58%;
}
/*end of introduction1*/
/*start of main picture*/
.mainimage {
background-color: #585858;
position: absolute;
top: 34%;
left: 21%;
width: 42%;
height: 42%;
}
.boxextension {
width: 16%;
height: 42%;
background-color: #585858;
position: absolute;
top: 34%;
left: 63%;
}
/*end of main picture*/
/*start of h2*/
.h2 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 35%;
left: 62%;
text-decoration: underline;
}
/*end of h2*/
/*start of introduction2*/
.introduction2 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
width: 16%;
position: absolute;
top: 41%;
left: 62%;
}
/*end of introduction2*/
/*start of table*/
.AG9S Table {
width: 20%;
border: 2px solid;
border-color: #000000;
position: absolute;
top: 78%;
left: 21%;
border-radius: 10px;
background-color: #000000;
list-style-type: none;
}
.AG9S Table td {
vertical-align: middle;
border: 1px solid #000000;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: 'Montserrat', sans-serif;
color: #E6E6E6;
}
.AG9S Table tr:nth-child(odd) {
background-color: #8A0808;
}
.AG9S Table tr:nth-child(even) {
background-color: #2E2E2E;
}
.AG9S Table tr:first-child td:first-child {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
}
.AG9S Table tr:first-child td:last-child {
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
}
.AG9S Table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}
.AG9S Table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
}
/*end of table*/
/*start of infotable1*/
.infotable Table {
width: 30%;
border: 2px solid;
border-color: #000000;
position: absolute;
top: 78%;
left: 42%;
border-radius: 10px;
background-color: #000000;
}
.infotable Table td {
vertical-align: middle;
border: 1px solid #000000;
text-align: left;
padding: 7px;
font-size: 12px;
font-family: 'Montserrat', sans-serif;
color: #E6E6E6;
}
.infotable Table tr:nth-child(odd) {
background-color: #8A0808;
}
.infotable Table tr:nth-child(even) {
background-color: #2E2E2E;
}
.infotable Table tr:first-child td:first-child {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
}
.infotable Table tr:first-child td:last-child {
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
}
.infotable Table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
}
.infotable Table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
}
/*end of infotable1*/
/*start of h3*/
.h3 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 90%;
left: 42%;
text-decoration: underline;
}
/*end of h3*/
/*start of introduction 3*/
.introduction3 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
top: 96%;
left: 42%;
width: 30%;
}
/*end of introduction 3*/
/*start of h4*/
.h4 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 102%;
left: 42%;
text-decoration: underline;
}
/*end of h4*/
/*start of introduction 4*/
.introduction4 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
top: 108%;
left: 42%;
width: 30%;
}
/*end of introduction 4*/
/*start of h5*/
.h5 {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
position: absolute;
top: 117%;
left: 42%;
text-decoration: underline;
}
/*end of h5*/
/*start of introduction 5*/
.introduction5 {
color: #E6E6E6;
font-family: 'Montserrat', sans-serif;
position: absolute;
top: 123%;
left: 42%;
width: 30%;
}
/*end of introduction 5*/
/* start of menu*/
.menu {
position: absolute;
top: 10%;
left: 2%;
}
/*end of menu*/
/*start of footer*/
.footer {
width: 100%;
position: absolute;
top: 150%;
background-color: #333333;
color: #ffffff;
padding: 30px 0;
}
.footer p {
font-family: 'Raleway', sans-serif;
font-size: 11px;
text-transform: uppercase;
}
/*end of footer*/<!DOCTYPE html>
<html>
<head>
<title>Lorem Ipsum Dolor</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='testcss.css' />
</head>
<body background="http://i.imgur.com/EUCIQ9x.png">
<!--start of header-->
<div class="header">
<div class="container">
<ul class="nav">
<li><a href="#"> Lorem </a>
</li>
<li><a href="#"> Home </a>
</li>
<li><a href="#"> Stuff </a>
</li>
<li><a href="#"> This </a>
</li>
<li><a href="#"> That </a>
</li>
</ul>
</div>
</div>
<!--end of header-->
<!--start of central box-->
<div class="centralbox">
</div>
<!--end of central box-->
<!--start of h1-->
<div class="h1">
<h1> Overview </h1>
</div>
<!--end of h1-->
<!--start of spec table 1-->
<div class="AG9S">
<ul>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
</td>
</tr>
</table>
</ul>
</div>
<!--end of table 1-->
<!--start of logo-->
<div class="logo">
<img src="https://git-scm.com/images/logos/downloads/Git-Logo-Black.png" width="100%" height="100%">
</div>
<!--end of logo-->
<!--start of introduction1-->
<div class="introduction1">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id.
</p>
</div>
<!--end of introduction1-->
<!--start of image-->
<div class="mainimage">
<img src="http://www.clker.com/cliparts/a/2/Y/Q/y/8/mustache-no-background.svg" height="100%" width="100%">
</div>
<div class="boxextension">
</div>
<!--end of image-->
<!--start of introduction2-->
<!--start of h2-->
<div class="h2">
<h2>Lorem</h2>
</div>
<!--end of h2-->
<div class="introduction2">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
</p>
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula,
</p>
</div>
<!--end of introduction2-->
<!--start of infotable-->
<div class="infotable">
<ul>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</ul>
</div>
<!--end of infotable1-->
<!--start of introduction 3-->
<!--start of h3-->
<div class="h3">
<h2>Lorem</h2>
</div>
<!--end of h3-->
<div class="introduction3">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
</p>
</div>
<!--end of introduction 3-->
<!--start of introduction 4-->
<!--start of h4-->
<div class="h4">
<h2>Ipsum</h2>
</div>
<!--end of h4-->
<div class="introduction4">
<P>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
</p>
</div>
<!--end of introduction 4-->
<!--startof h5-->
<div class="h5">
<h2>Dolor</h2>
</div>
<!--end of h6-->
<!--start of introduction 6-->
<div class="introduction5">
<p>
Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
</p>
</div>
<!--end of introduction 6-->
<!--start of menu-->
<div class="menu">
<select onchange="window.location.href=this.value">
<option value="#">Lorem</option>
<option value="https://www.youtube.com/">Ipsum</option>
<option value="#">Dolor</option>
</select>
</div>
<!--end of menu-->
<!--start of footer-->
<div class="footer">
<div class="container">
<p>© blahblah 2015</p>
</div>
</div>
<!--end of footer-->
</body>
</html>
Я думаю, что вы на хороший старт, но в то время как вы говорите, что вы делаете все, что в процентах, есть еще вещи, в пикселях. Например, ширина: 640px; 'наверху. Это не будет способствовать хорошей отзывчивости! Возможно, сначала вы должны попробовать несколько простых конструкций. –