Exore LTD » CSS3 » Как создать адаптируемый шаблон
Лого SiteHere.ru

Июль 16, 2014 Запись была обновлена

Время чтения: 4 мин. Прочитать позже

Как создать адаптируемый шаблон

Как создать адаптируемый шаблон

Сейчас на сайте важно иметь такой дизайн сайта, который бы правильно отображался как на больших мониторах, так и на мобильных устройствах. Это значительно повышает посещаемость сайта, т.к. нет большого желания читать сайт, если шаблон его «разъехался»(блоки находятся не на своих местах) при маленьком разрешении например.

Пример шаблона можете увидеть здесь. Можете его также увеличивать, уменьшать и вы увидите как он изменяется:

Посмотреть примерСкачать



HTML часть

Мы будем использовать HTML5, потому что в пятой версии есть такие элементы как header, footer, nav и т.д. Также подключим файл reset.css для того чтобы сбросить все стили в разных браузерах и начинать с чистого листа.

Весь контент находится в <div id="wrapper"> . Затем внутри идет заголовок с подзаголовком, слоган и навигация. Следующим блоком располагаются статьи и справа навигация. Затем блок это блок «Об авторе» и последний блок с копирайтами. В структуре нет ничего необычного, обычная страница html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<div id="wrapper">
    <header>
        <h1><a href="#">Название сайта</a></h1>
        <h2>Подзаголовок и слоган сайта</h2>			
        <nav>
            <a href="#">Главная</a>
            <a href="#">Об авторе</a>
            <a href="#">Портфолио</a>
            <a href="#">Блог</a>
            <a href="#">Контакты</a>
            <div class="clearfix"></div>
        </nav>	
    </header>
    <section id="main-content">
        <div id="featured">
            <h3>Будущие записи:</h3>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
                   ....
                <a href="#">Читать дальше →</a></p>
        </div>
        <hr>
        <div id="latest">
            <section class="left-col">
                <h3>Последние записи:</h3><br>
                <h4><a href="#">Заголовок 1</a></h4>
                <p>Vivamus sagittis lacus vel augue
                   ....
                <a href="#">Читать дальше →</a></p>
                <h4><a href="#">Заголовок 2</a></h4>
                <p>Vivamus sagittis lacus vel augue
                   ....
                <a href="#">Читать дальше →</a></p>
                <h4><a href="#">Заголовок 3</a></h4>
                <p>Vivamus sagittis lacus vel augue
                   ....
                <a href="#">Читать дальше →</a></p>
            </section>
            <aside class="sidebar">
                <h4><a href="#">Архив</a></h4>
                <ul>
                    <li><a href="#">Июль 2013</a></li>
                    <li><a href="#">Август 2013</a></li>
                    <li><a href="#">Сентябрь 2013</a></li>
                </ul>
                <h4><a href="#">Категории</a></h4>
                <ul>
                    <li><a href="#">Статьи</a></li>
                    <li><a href="#">Уроки</a></li>
                    <li><a href="#">Новости</a></li>
                </ul>
                <h4><a href="#">Социальные сети</a></h4>
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Вконтакте</a></li>
                    <li><a href="#">Google+</a></li>
                </ul>	
            </aside>
        </div>
        <div class="clearfix"></div>
        <hr>
        <div id="about">
            <h3>Об авторе</h3>
            <p>Integer posuere erat a ante venenatis
               ....
            </p>
        </div>	
    </section>	
    <hr>
    <footer>
        <p>© 2013 - Адаптируемый шаблон</p>
    </footer>		
</div>

Вот как сейчас выглядит наша страница:

Без стилей


CSS часть

Зададим для body легкий серый фон:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body { 
    background: #F9F9F9; 
    color: #222; 
    font-family: serif; 
    font-size: 16px; 
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in; 
    transition-timing function: linear, ease-in; 
}

Весь контент находится в блоке с идентификатором #wrapper. Поэтому ему необходимо задать такую ширину, чтобы она автоматически выставлялась при изменении разрешения экрана.

1
2
3
4
5
6
7
8

#wrapper  { 
    margin: 10px auto; 
    max-width: 980px; 
    width: 90%; 
    background: #fff; 
    padding: 10px 0; 
    border:1px solid #CDCDCD
}

Для этого вы выставили 90%. Это позволяет динамически выставлять ширину сайта, в зависимости от разрешения экрана пользователя.


Затем идет основной блок стилей:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

h1 {
    font-size: 90px; 
    font-family: serif; 
    line-height: 75px; 
    padding: 10px; 
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in; 
    transition-timing function: linear, ease-in;  
}
 
h1 a:hover { 
    text-decoration: none; 
    color: #3CC117;
}
 
h2 { 
    font-family: serif; 
    font-size: 18px; 
    padding: 10px; 
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in; 
    transition-timing function: linear, ease-in;
}
 
h3 { 
    font-family: serif; 
    font-size: 30px; 
}
 
h4 { 
    font-family: serif;
    padding: 3px; 
    margin: 5px 0 0 0; 
}
 
h4 a {
    text-decoration: underline; 
}
 
nav { 
    background: #222; 
    padding: 0; 
    margin: 10px 0;
}
 
nav a { 
    color: #F9F9F9; 
    display: block; 
    float: left; 
    padding: 10px; 
}
 
nav a:visited { 
    color: #f9f9f9; 
}
 
nav a:hover { 
    text-decoration: none; 
    background: #23A000; 
}
 
nav a:active { 
    position: relative; 
    top: 0; 
}
 
.left-col { 
    width: 70%; 
    float: left; 
}
 
.left-col p a {
    color:#277D0F;
}
 
.left-col p a:hover {
    color:#37B215;
}
 
.sidebar {
    width: 20%; 
    float: right;
    margin-bottom: 10px; 
    -webkit-transition-property: width;
    -moz-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in; 
    transition-timing function: linear, ease-in;
}
 
.sidebar h4 a {
    color:#000;
    text-decoration:none;
}
 
.sidebar h4 a:hover {
    color:#072100;
    text-decoration:none;
}
 
#featured {
    padding: 20px; 
}
 
#latest	{
    padding: 20px; 
}
 
#about {
    padding: 20px; 
}
 
p { 
    padding: 0 5px 0 5px; 
}
 
ul { 
    list-style: none; 
}
 
ul li { 
    margin: 0 5px; 
}
 
footer {
    padding: 5px; 
}

Для двух клонок мы также задаем ширину в процентах, чтобы они также имели свойство динамически изменять размер. Ну а в остальные свойства я думаю и так понятны. Мы просто задаем различные шрифты, цвета и отступы для блоков и текста.


Для того чтобы сайт правильно отображался для различных браузеров с разными разрешениями, мы будем использовать файл CSS3 Media Queries, подключая файл media-queries.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

@media screen and (max-width: 478px) {
    h1 { 
        font-size: 70px; 
        padding: 1px; 
    }
 
    h2 { 
        font-size: 13px; 
        padding: 1px;
    }
 
    body { 
        font-size: 13px; 
    }
}
 
@media screen and (max-width: 740px) {
    .left-col { 
        width: 100%; 
    }
 
    .sidebar { 
        width: 100%; 
    }
}
 
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Примерно так будет выглядеть данный шаблон на мобильных устройствах:

Маленькое разрешение


Выводы

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

Успехов!

Источник: onextrapixel.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

7 комментариев к записи
  • WPixel

    для адаптива не обязателен html5. А в этом примере
    wrapper (
    max-width: 980px;
    width: 90%;
    )
    Следовало бы задать width: 980рх,а max-width: 100% так логичнее было бы

     
    Ответить
    • Александр

      Тут не согласен, у автора статьи все же логичнее будет. Да и max-width: тот же ИЕ8 не поймет.

       
      Ответить
  • Александр Маврин

    Все хорошо, но правильным будет название — адаптивный.

     
    Ответить
  • Вадим

    Отличный дизайн.. рисунки в стилях бы еще прописать

     
    Ответить
  • Артур

    Как раз то что искал!! спасибо большое за подробную раскладку по полочкам как что делать))

     
    Ответить
  • Алла

    Здравствуйте, не подскажете почему заголовок Н1 вылезает за границы поля на мобильном телефоне с узким экраном? Причем если телефон перевернуть горизонтально, все становится на свои места.  

     
    Ответить
    • Юрий Немец

      Добрый день, Алла!

      Причин может быть много:

      1) Установлена фиксированная ширина в CSS для этого заголовка.

      2) Слишком большой шрифт и слова не переносятся.

      3) Ширина блока-родителя является фиксированной.

       
      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *