Резиновый дизайн и верстка
Опубликовано: 01.09.2018
Резиновый веб-дизайн с 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%
