Адаптыўны ці не адаптыўны?

Адаптыўны сайт – сайт які адаптуецца пад памеры браўзера. Напрыклад, праглядаем сайт на смартфоне з шырынёй браўзера 480px, або на ноўтбуке 1380px. Канешне, хацелася б каб сайт адаптаваўся(выглядаў па рознаму) пад памеры, каб карыстальніку было зручней атрымаць патрэбную інфармацыю. Калі забіць на адаптыўнасць і проста зрабіць 1 макет на ўсё памеры, то напрыклад на смартфоне з’явіцца вялікі гарызантальны скрол і карыстальніку прыйдзецца напружвацца каб карыстацца сайтам. Карацей, 90%(статыстыка HD) праглядаюць інтернет з HD разрозненнем і 10%(агульная статыстыка) з планшэтаў і смартфонаў.
Так адаптыўны ці не?
Для простых сайтаў: промо, блогаў, сайтаў навін, партфоліо ды г.д – можна справіцца адаптыўнай версткай.
Для сайтаў-парталаў, сайтам з функцыяналам – адной адаптыўнай версткі ня хопіць, і тут паступаюць па-рознаму(напрыклад ўкантакце): зрабілі асобны сайт пад мабільныяm.vk.com, зрабілі прыладу пад смартфоны, і асноўны сайт. Рабіць адаптыўным ці не, вырашаць Вам па канкрэтнаму становішчу.
Што робіць сайт адаптыўным? Гэта проста розная верстка пад розныя памеры браўзера. Напрыклад калі сайт праглядаюць з шырынёй да 480px выкарыстоўваецца адзін варыянт версткі(напрыклад усе блокі ў адну калонку), калі праглядаюць з шырынёй ад 1200px то іншы варыянт версткі(напрыклад ужо 3 калонкі). Шмат чаго можна зрабіць адаптыўным пад памеры: па-першае асноўныя блокі(сам макет), меню, малюнкі і г.д. Падборку як і што можна адаптаваць глядзім тут
У гэтай часткі занятка разглядзім варыянта адаптацыі макета(асноўных блокаў).
Гумавы – асноўныя блокі сціскаюцца да шырыні браўзера, дзе такое немагчыма – перабудоўваюцца ў адну дліную ленту. Гэта падыход карыстае гумавая сетка bootstrap. Прыклад такога сайту http://mediaqueri.es/fss/
Зробім макет: у нас будзе галоўная секцыя, якая змяшчае 3 калонкі і асобны футэр.

         <head>
<style>
.column {
height: 400px;
float:left;
}

.first {
background: #90ee90;
}
.second {
background: blue;
}
.third {
background: gray;
}
.footer {
background: black;
margin-top: 50px;
height: 200px;
}
</style>
</head>
<body>
<section class="container">
<section class="column first">First column</section>
<section class="column second">Second column</section>
<section class="column third">Third column</section>
</section>
<div class="clear"></div>
<footer class="footer">Main footer</footer>
А зараз робім 2 варыянты нашай версткі, першы для шырыні больш за 768px(планшэты і вышэй) і менш за 767px(смартфоны і планшэты з партрэтнай арыентацыей). Першы варыянт будзе 3 гумавыя калонкі шырынёй па 33%. Каб напісаць css, які будзе працаваць толькі для шырыні больш 768px – напішам у css наступны код:
        @media (min-width: 768px) {
            /* тут знаходзяцца css правілы, якія працуюць толькі для шырыні ад 768px */
        }
    
Паставім шырыню 33% для нашай шырыні ад 768px. Проста дадаём правілы ў медыя.
    <head>
        <style>
            .column {
                height: 400px;
                float: left;
            }

            .first {
                background: #90ee90;
            }
            .second {
                background: blue;
            }
            .third {
                background: gray;
            }
            .clear {
                clear: both;
            }
            .footer {
                background: black;
                margin-top: 50px;
                height: 200px;
            }

            @media (min-width: 768px) {
                .column {
                    width: 33%;
                }
            }
        </style>
    </head>
    <body>
    <section class="container">
        <section class="column first">First column</section>
        <section class="column second">Second column</section>
        <section class="column third">Third column</section>
    </section>
    <div class="clear"></div>
    <footer class="footer">Main footer</footer>
    </body>
    
Пагуляйцеся з шырынёй браўзера і адчуйце гумку: 3 калонкі сціскваюцца па шырыне, пакуль шырыня браўзера ня менш за 768px.
Прапішам правіла для шырыні менш за 768px. Трэба каб кожная калонкі шлі вертыкальнай лентай, таму проста дадазім новае медыя з максімальнай шырынёй 767px і там выставім шырыню роўную 100%.
    <head>
<style>
.column {
height: 400px;
float: left;
}

.first {
background: #90ee90;
}
.second {
background: blue;
}
.third {
background: gray;
}
.clear {
clear: both;
}
.footer {
background: black;
margin-top: 50px;
height: 200px;
}

@media (min-width: 768px) {
.column {
width: 33%;
}
}

@media (max-width: 767px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<section class="container">
<section class="column first">First column</section>
<section class="column second">Second column</section>
<section class="column third">Third column</section>
</section>
<div class="clear"></div>
<footer class="footer">Main footer</footer>
</body>
Усё, змяняешь памеры браўзера і атрымоўваем асалоду ад першай адаптыўнай версткі. Дарэчы % у памерах лічацца ад бацькоўскага элементу, напрыклад калі наш галоўны кантэйнер расцягнуўся на 1000px, то калонка будзе мець шырыню 330px(1000px*0.33).
Перанос блокаў – тут ўсё проста, проста ставім фіксаваную шырыню калонкам і float:left. Яны проста будуць пераносіцца адна за адной, нават ня трэба пісаць медыя. Прыклад такога сайту mediaqueri.es/mod/
Свой спрашчоны прыклад:
    <head>
<style>
.column {
width: 200px;
height: 400px;
float: left;
}

.first {
background: #90ee90;
}
.second {
background: blue;
}
.third {
background: gray;
}
.clear {
clear: both;
}
.footer {
background: black;
margin-top: 50px;
height: 200px;
}

</style>
</head>
<body>
<section class="container">
<section class="column first">First column</section>
<section class="column second">Second column</section>
<section class="column third">Third column</section>
</section>
<div class="clear"></div>
<footer class="footer">Main footer</footer>
</body>
Сцісніце і глядзіце як блокі проста пераскокваюць. пераключэнне макетаў – пад кожная разрозненне ствараем свой выгляд. Напрыклад для шырыні больш за 1200px, блок меню паказваецца зверху а сайд бар справа, пры шырыне менш за 768px меню паказваецца ў выглядзе іконак злева, а сайд бар зусім знікае. То бок пад кожнае разрозненне – асобны выгляд. Гэта сродак працазатратны таму ня вельмі папулярны.

Некалькі прыкладаў сайтаў: mediaqueri.es/fse/, mediaqueri.es/pma/
Малая кроў – падыходзім для “аднаблочных” сайтаў, маштабуецца толькі кантэнт, без пераносу блокаў.

Прыклады сайтаў: mediaqueri.es/pa/, mediaqueri.es/neo/
Мы разглядзелі некалькі падыходаў да адаптыўных макетаў.
Разглядзім якую макетную сетку прапаноўвае нам bootstrap. Для гэтага трэба спампаваць bootstrap.
Падключам 2 файла css(укажыце свой шлях да файлаў):
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css">
Адчынем старонку з адаптыўнай сеткай ад бутстрапа. bootstrap scaffolding Тут ёсць звычайная адаптыўная сетка(grid) і гумавая(fluid grid).
bootstrap gridСпачатку звычайную. Бяром прыклад з сайту, і проста дадзім вышыню і каляры. Сетка складаецца з 12 калонак. Першы слупок у нас будзе шырынёй 4 калонкі, а другі 8 калонак.
        <head>
<style>
.span4, .span8 {
height: 400px;
}
.span4 {
background: grey;
}
.span8 {
background: blue;
}
</style>
</head>
<div class="row">
<div class="span4">first column</div>
<div class="span8">second column</div>
</div>
Усё! Змяняем шырыню браўзера і пабыч што адбываецца з слупкамі? Яны маюць некалькі фіксаваных варыянтаў шырыні, а пры маленькай шырыне – становяцца вертыкальная лінейкай. Напрыклад для разрознення да 1200px шырыня адной калонкі каля 100px, да 968px – адна калонка каля 80px, да 768px – блокі пераносяцца.
bootstrap fluid grid – Тое ж самае што звычайна, але шырыня калонак змяняецца ня фіксавана, а па %.
Той жа прыклад, толькі fluid-grid(замест row пішам row-fluid)
        <head>
<style>
.span4, .span8 {
height: 400px;
}
.span4 {
background: grey;
}
.span8 {
background: blue;
}
</style>
</head>
<div class="row-fluid">
<div class="span4">first column</div>
<div class="span8">second column</div>
</div>
Вуаля. Усе тое ж самае, толькі шырыня змяняецца гумава.

Карысныя спасылкі:
w3c
Хатняе заданне:
1. Зрабіць гумавы макет самастойна. 2. Зрабіць перанос блокаў як на сайце mediaqueri.es/mod/ 3. скарыстаць bootstrap спампаваць і зрабіць некалькі прыкладаў з scaffolding.(сетка, гумавая сетка, водступы)

Наступны занятак