Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » Общество » Принципы резиновой верстки сайта RSS
сен 05 2016 photo

Принципы резиновой верстки сайта

Alessa Shtern 28 364
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5

Резиновый веб-дизайн с 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%


HashFlare
Другие новости по теме:
  • Holder.js - изображения заглушки
  • Красивое вертикальное меню на CSS
  • CSS3 Media Queries становится официальной рекомендацией W3C
  • Что такое JQuery Mobile? Почему JQuery Mobile? Как использовать JQuery Mobile?
  • Горизонтальное меню на CSS

Комментарии к: Принципы резиновой верстки сайта (3)

    1. №1  6543 16-11-2020 Цитировать

      это это это

    1. №2  Independentgnd 16-01-2025 Цитировать
      written on the parchment was scratched out
    1. №3  долбаёб 19-03-2025 Цитировать

      хуета полная безмамный еблан нахуй ты что то пишешь уёбище скинься нахуй подорасина

Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Holder.js - изображения заглушки
  • Красивое вертикальное меню на CSS
  • CSS3 Media Queries становится официальной рекомендацией W3C
  • Что такое JQuery Mobile? Почему JQuery Mobile? Как использовать JQuery Mobile?
  • Горизонтальное меню на CSS
  • Популярное
  • Авторизация
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015