Принципы резиновой верстки сайта
Резиновый веб-дизайн с HTML5 и CSS3 позволяет нам создавать веб-страницы, которые способны адаптироваться согласно ширины окна браузера. HTML5, CSS3, JS позволяет более быстро превратить ваш сайт в резиновую модель.
Для создания резиновых веб-страниц, мы должны знать, как работать с: резиновым макетом, резиновой шириной, резиновыми: текст и изображения, видео и ифреймы, резиновые: margin и padding, таблицы и формы, адаптивное меню.
Методы верстки резиновых веб-страниц.
Основной идеей для создания резинового макета с HTML5 и CSS3 является определение размеров элементов страницы в процентах или EMs, что позволяет элементам веб-сайта атоматически изменять размер в соответствии с размером окна браузера.
Для создания резинового макета используется формула: target ÷ context = result
- target - размер шрифта(или ширины) которые мы имеем в пикселях(ширина рассчитывается в % и размер в em)
- context - размер шрифта, если он не задан для body то можно к примеру использовать тот который установлен по умолчанию(для Mozilla это 16px).
- result - результат который мы получим в em или %
В общем, преобразования размера элемента с пикселей в проценты или EMs делается относительно его родительского элемента, смотрите примеры:
body{font: 13px/18px Arial;}
header{
background: >#252525;
padding: 1.5625%; /* 15px/960px*100 = 1.5625% */
max-width:960px; width:100%;
}
header h1{
font-size:1.384615384615385em; /* 18px/13px = 1.384615384615385em */
line-height:1.111111111111111em; /* 20px/18px = 1.111111111111111em */
}В данном примере видим что при условии если мы хотим сделать размер текста для header h1 font-size: 18px; и line-height: 20px; нам необходимо расчитать размер в EM согласно его родительского элемента, то есть body: font-size: 13px; line-height: 18px; в резултате получаем font-size:1.384615384615385em; и line-height:1.111111111111111em;
Резиновые: макет, ширина, margin и padding.
Создаём section, где мы расположим два asides:
section.content-columns{
padding: 1em;
max-width: 83em;
min-width: 20em;
margin: 0 auto;}
aside.content-column-left{
clear: left;
float: left;
padding: 1%;
width: 47%;}
aside.content-column-right {
float: left;
padding: 1%;
width: 47%;}В этом примере вы видите, что у нас есть section с максимальной шириной: 83em эквивалентной 1328px и внутри мы имеем два блока каждый с шириной: 47%, и если мы изменяем размер экрана браузера наши внутренние блоки всегда будут иметь ширину: 47% и padding: 1%
Текст и изображения в резиновой верстке
Этот метод CSS позволяет изменять размер изображения автоматически в соответствии с размером экрана, текст каждого элемента на веб-сайте может быть задан персонально, так как для всего документа задан размер шрифта font-size:100%.
body{
font: normal 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em; /* 16px / 16px = 1em*/
}
img {
border: none;
outline: none;
max-width: 100%;
height: auto !important;}
Видео и ифреймы.
embed, object, video {
max-width: 100%;
height: auto;}Резиновый дизайн: формы, таблицы, меню
Пример адаптивной контактной формы.
Html:
<form action="#" id="contact-form" method="post">
<label for="name">Name:<span class="any">*</span></label>
<input class="required" id="name" name="name" type="text" />
<label for="email">Email:<span class="any">*</span></label>
<input class="required" id="email" name="email" type="email" />
<label for="url">Website:</label> <input id="url" name="url" type="url" />
<label for="subject">Subject:<span class="any">*</span></label>
<input class="required" id="subject" name="subject" type="text" />
<label for="message">Message:<span class="any">*</span></label>
<textarea class="required" cols="50" id="message" name="message" rows="5">
</textarea><a class="readmore" ="#">Send Message</a>
</form>
CSS:
#contact-form{ margin: 0 10px; padding: 0 7px;}
label{display:block;}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
textarea, select{
width: 100%;
padding: 5px;
margin: 10px;
font-size:0.9em;}
Для создания таблиц и меню у нас есть две возможности: первая заключается в использовании JS(JQuery), и вторая с помощью Media Queries заточить свой сайт под свои нужды.
Создать резиновую таблицу можно следующим способом:
HTML
<table width="100%" border="0">
<caption>
Our Tasks
</caption>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Year</th>
<th scope="col">Satisfaction</th>
<th scope="col">Price</th>
<th scope="col">Review</th>
<th scope="col">Commits</th>
<th scope="col">Errors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Design</td>
<td>2013</td>
<td>Good</td>
<td>€1000</td>
<td>Past</td>
<td> - </td>
<td>No errors</td>
</tr>
<tr>
<td>Web Design</td>
<td>2013</td>
<td>Very Good</td>
<td>€1200</td>
<td>Past</td>
<td> + </td>
<td>Need review</td>
</tr>
<tr>
<td>Programing</td>
<td>2013</td>
<td>Awesome</td>
<td>€4000</td>
<td>Future</td>
<td> + </td>
<td>Resolved</td>
</tr>
<tr>
<td>Seo Optimization</td>
<td>2013</td>
<td>Need review</td>
<td>€50000</td>
<td>Future</td>
<td> - </td>
<td>Resolved</td>
</tr>
</tbody>
</table>
CSS
@charset "utf-8";
/* CSS Document */
/* HTML5 Doctor Reset */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html{
overflow-x:hidden;}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 93%;}
table {
border-collapse: collapse;
max-width:1200px;
margin:20px auto;
}
table th{
border:2px solid #666;}
table caption {
color: #365365;
text-align: left;
font:italic 1.3em/1.5em "chaparral-pro",Georgia,"Times New Roman",Times,serif;
padding: 1em 0 0 0;
margin-bottom: .5em;
}
table td {
border: 1px solid #999;
padding: 0.25em
}
table td:nth-child(even) {
text-align: center;
}
/* Mobile width < 600px*/
@media (max-width: 600px) {
table, thead, tbody, th, td, tr, caption {
display: block;
}
thead tr {
display: none;
}
#mainContent table tr:nth-of-type(even) {
background-color: rgba(102,51,121,.25)
}
td {
border: none;
position: relative;
text-align: center;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
}
/* Label the data */
td:nth-of-type(1):before {
content: "Title:";
color: red;
font-weight:bold;
}
td:nth-of-type(2):before {
content: "Year:";
}
td:nth-of-type(3):before {
content: "Satisfaction:";
}
td:nth-of-type(4):before {
content: "Price:";}
td:nth-of-type(5):before {
content: "Review:";
}
td:nth-of-type(6):before {
content: "Commits:";
}
td:nth-of-type(7):before {
content: "Errors:";
}
}В случае, если некоторые элементы страницы не имеют размер в процентах, то есть имеют фиксированный размер: списки или боковая навигация. В этом случае для избежания того чтобы сайт не предстал в неприглядном виде на экранах с большим и малым разрешениями, в этих случаях задаётсяmax-width и min-width, чтобы вашим сайтом могли пользоваться пользователи без каких-либо проблем.
С HTML5 и CSS3 мы имеем больше шансов для создания резиновых веб-страниц. Использование Media Queries которые поддерживаются всеми новыми браузерами и если мы хотим чтобы IE 6-8 также мог поддерживать Media Queries мы можем добавить js-скрипт respond.js для Drupal(работает только при включенной опции Объединение и сжатие файлов CSS) или загрузить с GitHub для использования с различными CMS respond.js. Медиа-запросы позволяют при помощи простых деклараций CSS в таблице стилей определить, какой размер будет иметь элемент страницы в зависимости с изменением окна браузера, например:
@media screen and (max-width: 600px){
#art_gallery{
width:100%;}
}Эта декларация определяет, что при уменьшении экрана браузера менее 600px DIV с ID#art_gallery эквивалентен ширине 100%.
Кроссбраузерность резинового(отзывчивого) веб-дизайна
Позиционирование элементов для Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari
При позиционировании элементов веб-сайта мы можем заметить разницу в 1px в различных браузерах, но так как принято в большинстве случаев для отзывчивого дизайна задавать размер в условных единицах EMs то решением для коректного позиционирования элементов веб-страницы является использование десятых и сотых долей единиц измерения.
Пример 1: значение margin-top: 2.01em; для какого либо элемента веб-страницы будет отображать данный элемент одинаково во всех браузерах, но если задать margin-top: 2em; то в Mozilla Firefox мы увидим что позиционирование отличается от того как будет расположен данный элемент в Internet Explorer, Google Chrome, Opera, Safari
Пример 2: значение line-height: 27.3px; для шрифта кнопок во всех браузерах отображается одинаково, но если задать line-height: 27px; то в Internet Explorer мы увидим незначительную разницу с тем как данное значение срабатывает в Google Chrome, Mozilla Firefox, Opera, Safari
Шрифты для стандартного отображения в различных браузерах
Для всех версий браузера Internet Explorer от компании Microsoft можно использовать следующие шрифты семейства Sans-serif: Calibri, Candara, Corbel, Cambria, Constantia.
Для Mac OS и её предшественников наиболее совместимы Monaco, Geneva, Myriad, Skia, но последняя версия Safari поддерживает практически все шрифты
Для unix/linux могут быть использованны DejaVu Sans, DejaVu Serif, DejaVu Sans Mono, Garuda, но не стоит забывать что все браузеры любой операционной системы поддерживают все стандартные шрифты как: Arial, Verdana, Tahoma и т.д
Оптимальный размер шрифта может быть задан между 93% и 97%