•  
  •  
  •  
  •  
1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 (4 Голосов)
Основы адаптивного веб-дизайна (Responsive). Каким образом сделать простой шаблон адаптивным - 5.0 out of 5 based on 4 votes

В этой статье речь пойдет об основах адаптивного дизайна (responsive). Вы сможете узнать, что такое адаптивный дизайн, css примеры так же будут рассмотрены.

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

И так, приступим.

01

Чем является адаптивный веб-дизайн?

Вам, скорее всего, приходилось посещать какие-нибудь сайты, используя мобильные устройства. При этом возникала необходимость в увеличении веб страницы для того, чтобы стало возможным прочтение этого мелкого текста, который в дополнение не размещается на экране мобильных устройств в полной мере. Это означает, что вы будете нуждаться в прокручивании влево или вправо веб страницы, при котором каждый пользователь сталкивается с некоторым неудобством. Но если посетить сайт, где использован адаптивный веб-дизайном, то ситуация кардинально изменяется. Вам не потребуется заниматься лишними «телодвижениями». На подобном сайте всё отличается удобством и может быть легко прочитано.

Иначе говоря, с помощью адаптивного дизайна обеспечивается правильный просмотр сайта на мобильном устройстве. При этом происходит адаптация, или подстройка, сайта под особенности разрешения на мобильном девайсе.

Основы теории

Как вам известно, для выстраивания всего веб дизайна используется CSS. CSS задаёт большинство правил по отображению сайта в разных браузерах. Конечно, адаптивному веб-дизайну не удалось стать исключением. Самым важным является использование стандартного правила media queries, которое позволяет задавать новые классы в соответствии с желаемым разрешением экрана. Также следует отметить изменения, произошедшие в стандартной CSS вёрстке. Самым большим изменением является замена процентами пикселей во время измерения ширины объекта.

Адаптивный дизайн примеры css: Размеры блока основного контента страницы ранее равнялся 600px, а ширина блока сайдбара 400px. Адаптивный дизайн данные значения должны прописываться с помощью процентов. Зная о такой особенности, мы имеем ширину контента 60%, а ширину сайдбара 40%. Надеемся, что нам удалось передать суть данного изменения.

Также, в стилях используются иные свойства, которые не применял фиксированный шаблон. Вот они:

max-width и width: если ширина сайта равна width:1000px, то уменьшив окно браузера можно ожидать появления горизонтальной полосы прокрутки. Иначе говоря, сайт просто не будет отображен полностью в окне. Поэтому придется обратиться к горизонтальной прокрутке для того, чтобы ознакомиться со всем сайтом. Но если мы установим width:100%, то сайт растянется по всей ширине экрана. Малые разрешения обеспечивают такому методу нормальный вид, а вот мониторы, у которых большое разрешение чрезмерно растянут сайт. При этом контент перестаёт быть читабельным. Это значит, что если вам необходима ширина сайта в 1000px, при которой нежелательно появление горизонтальной полосы прокрутки, то следует воспользоваться max-width.

Вот что мы имели вначале:

 1|   width:1000px

А вот что стало:

1|   width:100%;

2|   

3|   max-width:1000px;

Теперь нашему блоку будет присуще свойство эластичности. Он будет изменяться в соответствии с размерами окна браузера. Но при достижении ширины в 1000 пикселей блок остановит свое расширение.

min-width и width: Здесь мы сталкиваемся с обратным эффектом. Если ране нам приходилось избавляться от горизонтальной полосы прокрутки, то здесь мы будем ее возвращать. Иначе говоря, если резиновый блок шириной в 100% при уменьшении разрешения будет подстраиваться под окно браузера, чем меньше окно, тем и меньше сам блок. min-width обеспечивает установку значения ширины блока, которое остановит его уменьшение. К примеру, если мы установим min-width: 200px; то блок, достигнув данную ширину, перестает уменьшаться. Это гарантирует появление горизонтальной полоса прокрутки в окне браузера.

Практическая часть

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

Данный шаблон включает три блока. Он состоит из шапки ресурса, главного контента и сайдбара. Таким образом, мы получаем блоки, к которым мы присвоили подходящие ID CSS:

Шапка сайта — #headerInner

Главный контент — #colLeft

Сайдбар — #colRight

Проверки

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

02

Теперь следует перейти к ознакомлению с разметкой html, она отличается своей простотой:

< !DOCTYPE html>
 
 
 
 
 
 
</pre>
<div id="headerInner">
<div class="logo">
 <a href="http://beloweb.ru">Логотип</a></div>
</div>
<pre>
 
<!-- начало врапер --></pre>
<div id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">
<div class="text">
<h1>Основной контент</h1>
Содержание главного контента</div>
</div>
<!-- Конец коллефт -->
 
<!-- начало колрайт -->
<div id="colRight">
<div class="text">
<h1>Текст сайдбара</h1>
Содержание сайдбара</div>
</div>
<!-- Конец колрайт --></div>
<!-- Конец контент --></div>
<!-- Конец мидл --></div>
<pre>
 
<!-- Конец врапер -->

 

А вот стили данного шаблона:

CSS

* {
 margin: 0;
 padding: 0;
 }
 
body {
 width: 100%;
 height: 100%;
 color:#333;
 background: url(images/body.png) 0px 0px repeat;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
 
}
 
h1 {
 font-size:30px;
 font-weight:normal;
 padding:0px 0 0px;
 line-height:100%;
 font-style:italic;
 
}
 
a {
 color: #cd5252;
 text-decoration:none;
 }
 
a:hover {
 color:#963c3c;
 text-decoration: none;
 }
 
/* -------------------------------
 Структура
 ----------------------------------*/
 
/* -------------------------------
 Ширина сайта в 1000px
 ----------------------------------*/
 
#wrapper {
 
margin-top:40px;
 border:0px solid #000;
 width: 100%;
 max-width:1000px;
 margin: 0 auto;
 height: auto !important;
 
}
 
/* -------------------------------
 Шапка сайта
 ----------------------------------*/
 
#headerInner {
 border: 0px solid #000;
 background: #d04942;
 position:relative;
 width:100%;
 max-width:1000px;
 height:100px;
 margin:0 auto;
 margin-top:0px;
 
}
 
.text {
 margin:15px;
 
}
 
/* -------------------------------
 Главный контент
 ----------------------------------*/
 
#content #colLeft {
 
border: 0px solid #000;
 float:left;
 width:67%;
 margin-right:0px;
 background: #85c9cf;
 
}
 
/* -------------------------------
 Сайдбар сайта
 ----------------------------------*/
 
#content #colRight {
 position:relative;
 margin-left:30px;
 float:left;
 width:30%;
 border: 0px solid #1FA2E1;
 background: #7a9e0e;
 
}
 
#middle:after {
 
content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
 }
 
/*----------------------------
 Логотип
 ------------------------------*/
 
.logo {
 
position:absolute;
 left:0px;
 top:40px;
 
}
 
.logo a {
 margin-left:30px;
 font-size:30px;
 color:#96b551;
 
}

 

Как вы могли отметить, ширина сайта равна в 1000px и применяются width и max-width:. О них мы говорили выше.

Шапка сайта имеет ширин в 1000 пикселей. Главному контенту #colLeft установлена ширина в 67%, правой колонке width:30%; и отступу между ними margin-left:30px; далее задание данного отступа будет происходить с помощью процентов.

Применение @media screen

Теперь самое интересное. Сейчас воспользуемся @media screen - основой адаптивного дизайна.

Вначале следует отметить, что в @media screen обеспечивается задание желаемых разрешений устройств. Они отличаются множеством вариаций, мы займемся причислением популярнейших: 320px, 480px, 600px, 768px, 900px, 1200px. Наш пример рассчитан на использование лишь двух разрешений, это 1024px и 768px. Таким образом, если разрешение устройства меньше чем 1024px будут задаваться свойства, которые заданы в @media screen. Так же точно и с разрешением 768px.

Вот как выглядит правило @media screen в стилях CSS:

 

1|   @media screen and(min-width:200px) and(max-width:1024px) {

2|

3|  }

Как можно убедиться, нами задано max-width:1024px. Благодаря данному значению браузер получает информацию о разрешении. А min-width:200px не позволит излишне сузить страницу. В этих скобках {} нами вписываются новые свойства для классов, которые задаются в стилях для шаблонов.

1024px

К примеру, мы хотим незначительно сузить весь сайт, используя заданное разрешение, но главный контент и сайдбар не должны изменяться.

05

Вот что нужно прописать в стилях:

@media screen and (min-width:100px) and (max-width:1024px) {
 
/* размер блока где находятся главный контент и сайдбар*/
 
body #wrapper {
 
margin-top:40px;
 
 width: 90%;
 margin: 0 auto;
 }
 
/* размер шапки сайта*/
 
body #headerInner {
width:90%;
 margin:0 auto;
 
 }
 
/* размер главного контента*/
 
#wrapper #content #colLeft {
 
width:67%;
 
 }
 
/* размер сайдбара*/
 
#wrapper #content #colRight {
 margin-left:3%;
width:30%;
 }
 
}

 

Шапке сайта #headerInner задан новый размер в 90%, так же убран max-width: он тут не нужен. #wrapper — это блок в котором находятся контент и сайдбар, его ширина тоже 90% как и у шапки сайта. Ширина сайдбара и контента остались неизменными, только изменился отступ у сайдбара в 3%. Это нужно для того, чтобы при уменьшении размера окна сайдбар не уезжал вниз.

768px

Теперь переходим к заданию стилей под разрешение от 768px и менее. Сейчас мы нуждаемся в перемещении сайдбара под основную часть контента, так как если его оставить справа, будет вообще не красиво и нечитабельно на маленьком разрешении. Вот что должно быть прописано в стилях:

@media screen and (min-width:100px) and (max-width:768px) {
 
#wrapper #colLeft {
 float:none;
 width:100%;
 margin-right:0px;
 
 }
 
#wrapper #colRight {
 margin-left:0px;
 margin-top:25px;
 float:none;
 width:100%;
 
 }
 
}

 

Главный контент #colLeft обеспечен шириной в 100%, чтобы он растягивался на весь монитор. К тому же, убрано выравнивание по левому краю float:none, для того, чтобы сайдбар #colRight съехал под главный контент.

Для сайдбара, тоже задано ширину в 100% и убрано выравнивание. А так же сделан отступ сверху, чтобы он немного отделялся от контента margin-top:25px;

Вот что у нас вышло в итоге:

08

 09

 

Другие статьи

  • Основы адаптивного веб-дизайна (Responsive). Каким образом сделать простой шаблон адаптивным
    12.11.2013
  • Быстрая проверка и лечение собственного сайта от вирусов
    17.09.2014
  • Наличие официального сайта компании как залог ее успешной деятельности
    10.01.2014
  • 15 примеров сайтов, на которых используется адаптивный дизайн
    20.12.2013
  • Каким образом самостоятельно провести удаление вируса с сайта
    05.03.2014
Портфолио
Память о Вас и Ваших близких на многие поколения
Подробнее
Прокат металла
Подробнее
Интернет-магазин кожи и меха
Подробнее
100% оригинальная парфюмерия в Москве
Подробнее
Вьетнамский ресторан премиум класса
Подробнее
Внедрение информационных систем
Подробнее
Организация международных конференций
Подробнее
Производство молочной продукции
Подробнее
Спортивный сайт
Подробнее
Интернет-магазин мебели и аксессуаров
Подробнее
Интернет-магазин электротранспорта
Подробнее
Сайт института актуальной экономики
Подробнее