Адаптивный макет для сайта на HTML и CSS

Вы наверняка замечали, что иногда бывает довольно трудно регулировать ширину сайта, чтобы он нормально отображался на всех устройствах (от небольшого разрешения мобильных устройств, до персональных компьютеров с высоким разрешением). Я думаю что многие сталкивались с этой проблемой. Для решения данной проблемы, поможет свойство - fluid (или liquid). Я подготовил несколько адаптивных макетов, все эти макеты имеют несколько столбцов с некоторым содержанием. И в качестве небольшого бонуса - вы сможете переключаться между раскладками на лету (без перезагрузки страницы) с использованием CSS3.

Сложность

html адаптивность

Шаг 1. HTML

index.html

<div class="layout">
<h1>Variants</h1>
<span id="var1"></span>
<span id="var2"></span>
<span id="var3"></span>
<span id="var4"></span>
<span id="var5"></span>
<div class="variants">
<a href="#var1" class="var1"></a>
<a href="#var2" class="var2"></a>
<a href="#var3" class="var3"></a>
<a href="#var4" class="var4"></a>
<a href="#var5" class="var5"></a>
</div>   <div class="columns">
<div class="column" id="left">
<img src="/post.png" alt="" />Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
<div class="column" id="right">
<img src="/post.png" alt="" />Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
<div class="column" id="center">
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<hr style="clear:both" />
Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
</div>
</div>

Здесь можно увидеть небольшую панель c вариантами переключателей, а после - три колонки с демо-контентом. Содержание - может быть изображения, текст или другие элементы.

Шаг 2. CSS

Перейдем к стилю страницы, если вы еще не знакомы с CSS, рекомендуем взглянуть на CSS учебник. Для начала подготовим основные стили для расположения столбцов:

columns {
    overflow: hidden;
    width: 100%;
}
.column {
    border: 1px dashed #CCCCCC;
    min-height: 150px;
    overflow: hidden;
    padding: 10px;
    position: relative;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition */
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.column img {
    float: left;
    margin: 0 10px 10px 0;
}
.column div {
    background-color: #888888;
    float: left;
    height: 80px;
    margin: 0 10px 10px 0;
    width: 80px;
}
#left {
    background-color: #C8FC98;
    float: left;
    width: 25%;
}
#right {
    background-color: #FDE95E;
    float: right;
    width: 25%;
}
#center {
    margin: 0 25%;
}

По умолчанию левая и правая колонки имеют определенную ширину (в процентах), а центральная колонка не имеет заданной ширины. Настроим стиль для кнопок:

.variants {
    height: 32px;
    margin: 20px auto;
    width: 200px;
}
.variants a {
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0 5px;
    width: 30px;
}
.variants .var1 {
    background-color: red;
}
.variants .var2 {
    background-color: orange;
}
.variants .var3 {
    background-color: pink;
}
.variants .var4 {
    background-color: green;
}
.variants .var5 {
    background-color: blue;
}

Как видите ничего сложного - просто цветные квадраты. И наконец – остальные пользовательские макеты:

/* variant 1 */
#var1:target ~ .columns #left {
    width: 25%;
}
#var1:target ~ .columns #right {
    width: 25%;
}
#var1:target ~ .columns #center {
    margin: 0 25%;
}

/* variant 2 */
#var2:target ~ .columns #left {
    width: 50%;
}
#var2:target ~ .columns #right {
    display: none;
}
#var2:target ~ .columns #center {
    margin: 0 0 0 50%;
}

/* variant 3 */
#var3:target ~ .columns #left {
    width: 18em;
}
#var3:target ~ .columns #right {
    width: 18em;
}
#var3:target ~ .columns #center {
    margin: 0 18em;
}

/* variant 4 */
#var4:target ~ .columns #left {
    width: 18em;
}
#var4:target ~ .columns #right {
    width: 20%;
}
#var4:target ~ .columns #center {
    margin: 0 20% 0 18em;
}

/* variant 5 */
#var5:target ~ .columns #left {
    display: none;
}
#var5:target ~ .columns #right {
    width: 18em;
}
#var5:target ~ .columns #center {
    margin: 0 18em 0 0;
}

Для первого варианта - все столбцы регулируемые. Для второго варианта - у нас есть только две видимых колонки, третья скрыта. В третьем варианте - первый и третий столбцы зафиксированы, а центральный столбец регулируемый. Четвертый вариант - только первая колонка фиксируется, и другие - регулируются. И наконец - пятый вариант, где у нас есть только 2 колонки, центральная колонка регулируемая, а правая колонка фиксируется (левый столбец невидимый).

/* variant 1 */ #var1:target ~ .columns #left { width: 25%; } #var1:target ~ .columns #right { width: 25%; } #var1:target ~ .columns #center { margin: 0 25%; } /* variant 2 */ #var2:target ~ .columns #left { width: 50%; } #var2:target ~ .columns #right { display: none; } #var2:target ~ .columns #center { margin: 0 0 0 50%; } /* variant 3 */ #var3:target ~ .columns #left { width: 18em; } #var3:target ~ .columns #right { width: 18em; } #var3:target ~ .columns #center { margin: 0 18em; } /* variant 4 */ #var4:target ~ .columns #left { width: 18em; } #var4:target ~ .columns #right { width: 20%; } #var4:target ~ .columns #center { margin: 0 20% 0 18em; } /* variant 5 */ #var5:target ~ .columns #left { display: none; } #var5:target ~ .columns #right { width: 18em; } #var5:target ~ .columns #center { margin: 0 18em 0 0; }

ДЕМО СКАЧАТЬ Перевод статьи Fluid layouts for your website

Тэги: templateresponsive

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.