- вступ
- почнемо
- 1. Гнучкий макет
- 2. Гнучкі зображення
- 3. Медіазапроси
- висновок
- Будь ласка, оцініть цю статтю
- Стаття виявилася вам корисною? Підпишіться, щоб не пропустити нові!
Замітка: активована адаптивна версія сайту, яка автоматично підлаштовується під невеликий розмір Вашого браузера і приховує деякі деталі сайту для зручності читання. Приємного перегляду!
12.02.2014
Доброго дня! Світ не стоїть на місці, а разом з ним не повинні відставати і ми. Відсоток відвідувачів з портативних пристроїв зростає в геометричній прогресії, в зв'язку з цією тенденцією і буде написана ця стаття.
вступ
До цього дня багато відвідувачів скаржилися як в коментарях, так і мені особисто на те, що даний блог просто не влазить в їх вузькі екрани (з'являється горизонтальна прокрутка, а фон впоратися не прогружаются). Я знав про цей недолік, але люблю економити час на подібних речах: свої сайти я верстаю для IE9 і вище, не створюю мобільних версій і тд. (Економія особистого часу і коду). Однак я і сам часто використовую смартфон в якості настільної книги по своїй професії: читаю стоячи в громадському транспорті, на дивані (ноутбука у мене немає) і тд. Загалом, я поступово прийшов до висновку, що таку важливу деталь, як зручність читання на різних пристроях більше не можна ігнорувати ні на одному з сайтів.
Прорахувати всі пристрої, з яких можуть зайти на ваш сайт в сучасному світі практично неможливо, адже вже є навіть бортові комп'ютери з виходом в Інтернет.
Тому створювати окрему версію сайту (мобільний) сенсу мало (це не означає, що я пропагую зовсім від них відмовитися, все залежить від конкретного випадку), тим більше багато власників планшетів і смартфонів незадоволені тим фактом, що на їх високотехнологічних пристроях з великою роздільною здатністю екрану відображається мобільна версія, замість повної.
Щоб нам не доводилося класифікувати пристрої на типи і створювати окремий сайт для смартфонів (m .site-on.net, mobile .site-on.net або site-on.net/ mobile /), окремий сайт для планшетів, окремий сайт для мультиварки з виходом в Інтернет і тд. - був придуманий адаптивний дизайн (синоніми: адаптивна верстка, макет).
Сенс адаптивного макета в тому, що сайт динамічно (в режимі реального часу) підлаштовується під розмір вашого пристрою, і якщо розмір дисплея раптом розшириться / звузиться (як при ресайз браузера або зміні орієнтації планшета), то і сайт на це відреагує негайно, без перезавантажень і затримок.
У підсумку ми отримуємо одну єдину версію сайту (site-on.net), яка чудово відображається на будь-яких пристроях і екранах, з огляду на їх особливості.
На створення адаптивного макета цього блогу (з фіксованого) у мене пішла вся минула субота: з 9:00 ранку до півночі з перервами на відпочинок.
Це заняття здалося мені злегка нудним, але бажання насолодитися кінцевим результатом не давало згаснути інтересу.
Тепер у всіх відвідувачів цього блогу з'явилася можливість зручного читання статей з будь-якого пристрою: починаючи з магнітоли в вашому авто і закінчуючи телевізором на вашій стіні.
Заради ідеї довелося навіть розпрощатися з рекламною рядком nolix, так як вона була недоречна при маленьких дозволах екранів, а прибрати її спеціально для них було б обманом рекламодавців, адже покази, швидше за все, все одно б накручувалися.
Коли я починав цікавитися адаптивної версткою, я не зміг знайти хорошого інструкції до дії в Мережі. З якоїсь причини все статті на цю тему не вселяли мені довіри, тому єдиним виходом для мене було прочитати все з першоджерела - з книги Ітана Маркотт «Чуйний веб-дизайн», оригінал книги знаходиться за адресою: http://www.abookapart.com/products/responsive-web-design
До речі, прочитавши російськомовний варіант книги, для себе я зробив висновок, що «адаптивний» і «чуйний» - це не 2 різних поняття, а просто труднощі перекладу, незважаючи на це в Мережі ви знайдете багато суперечок на цю тему.
Далі ми переходимо до інструкції по створенню чуйного макета сайту, на прикладі цього блогу.
Порівняйте вид на планшетах, як було (дозвіл 1280 * 800):
Як стало:
На смартфоні, як було (дозвіл 320 * 480):
Як стало:
Ще раз підкреслюю, що різниця видна не тільки на портативних пристроях, а й на будь-яких інших пристроях з відносно вузьким дозволом дисплея. Наприклад, у мене в залі стоїть другий стаціонарний комп'ютер з трубчастим монітором і роздільною здатністю 1024 на 768 пікселів, так от якщо раніше мій блог не поміщався в нього по ширині і виглядав жахливо, то тепер складається враження, ніби блог створювали спеціально під цей старий монітор.
почнемо
Адаптивний дизайн складається з трьох головних принципів:
- гумовий макет
- гумові зображення
- Медіазапроси
1. Гнучкий макет
Для створення гнучкого макета ми повинні використовувати тільки відносні одиниці виміру: em для розміру шрифтів і% для розмірів елементів. У рідкісному використанні px теж немає нічого поганого, але краще звести їх використання до мінімуму.
Раніше ширина цього блогу була фіксованою і дорівнювала 1080px, замість цього нам потрібно взяти якесь більш гнучке значення, наприклад 90% вікна браузера. При цьому я вирішив, що сайт все одно не повинен бути надто широким, і тому відразу ж обмежив його ширину до моїх улюблених 1080px, в результаті було:
h1, # logo, # width, # slogan, # h ul {width: 1080px; margin-left: auto; margin-right: auto}
стало:
h1, # logo, # width, # slogan, # h ul {width: 90%; max-width: 1080px; margin-left: auto; margin-right: auto}
Чому саме 90%? Просто мені так захотілося, я вирішив, що відступи по 5% справа і зліва будуть саме те. Можна було поставити 99% або 80%, все залежить від вашої задумки.
Йдемо далі, у мене є 2 колонки: основна колонка (та, де ви зараз перебуваєте очима) і права колонка. Їх ширина дорівнювала 780px і 280 px, але тепер ми повинні перерахувати її в процентах, і ось вам формула на всі випадки життя:
target / context = result
або якщо говорити спрощено і по-російськи, то:
Ширину (розмір шрифту) потрібного елемента в px розділити на ширину (розмір шрифту) батьківського елемента в px = шуканий результат у% (або em).
На цьому можна було б закінчити розповідь про гумовому макеті, так як всю суть я вже розповів, але для кращого засвоєння я продовжу.
Отже, основна колонка в фіксованому варіанті дорівнює 780 px, її контекст (батько) у фіксованому варіанті має ширину 1080px, в результаті:
780/1080 = 0.72222222222
Так як нам потрібні відсотки, а не em, то результат потрібно помножити на 100, в результаті отримуємо:
72.222222222%
Ви, напевно, сподівалися, що я округлі це число? Але немає, в книзі цього категорично не рекомендують. Тому дивіться по ситуації, наскільки важлива в вашому випадку точність. У разі двох колонок така точність абсолютно не має значення, тому я зі спокійною душею вирішив округляти все до 4 знаків після точки. У підсумку ось мій CSS для основної колонки:
#c {float: left; width: 72.2222%;} / * 780/1080 * /
Зверніть увагу, рекомендується залишати коментарі з розрахунками, інакше ви забудете і заплутаєтеся що на що ділити надалі. Особисто я люблю залишати в коментарях тільки перше число - дільник.
Проробляємо теж саме з правою колонкою:
#r {float: right; width: 25.9259%; color: # 000} / * 280/1080 * /
Сподіваюся, суть зрозуміла, тепер перейдемо до розмірів шрифту, який розраховується так само.
За замовчуванням десктопні браузери виставляють розмір шрифту 16px, але нам пікселі не бажані, тому якщо ви хочете залишити це ж значення потрібно:
16 (потрібне значення) / 16 (значення за замовчуванням) = 1 em
Але я вважаю шрифт в 16 пікселів занадто дрібним, я вважаю за краще 18, тому:
18/16 = 1.125 em
Пишемо в CSS:
body {font-family: "Times New Roman"; font-size: 1.125em;}
Розмір шрифту мого логотипу «Site on!» У фіксованому макеті становить 40px, переведемо його в em:
40/18 = 2.2222em
Ви звернули увагу? Тепер ми ділимо нема на 16px, а на 18px, так як у батька (у тега body) мого логотипу розмір 18px, в результаті CSS:
body {font-family: "Times New Roman"; font-size: 1.125em;} / * 18px * / #logo a {text-decoration: none; font-size: 2.2222em; color: # 000} / * 40px * /
І так з кожним елементом, дійсно нудно, чи не так? Але наша праця з лишком окупляться у вигляді стабільного трафіку з мобільних пристроїв.
2. Гнучкі зображення
Скажу коротко: якщо ви не вказуєте розміри зображень в атрибутах тега img, то додаємо в ваш CSS:
img {max-width: 100%;}
А якщо вказуєте розміри зображень в атрибутах (я вказую і вам раджу):
img {max-width: 100%; height: auto;}
Готово!
3. Медіазапроси
Дуже цікава, проста і разом з цим надзвичайно корисна річ - @media. Але давайте відразу про кросбраузерності ... Гарна новина полягає в тому, що більшість сучасних браузерів підтримують медіазапроси: серед них Opera 9.5+, Firefox 3.5+, браузери на базі WebKit, такі як Safari 3+ та Chrome, а також IE 9 +.
Та й з мобільними браузерами справи йдуть непогано. Медіазапроси підтримують такі браузери на базі WebKit, як Mobile Safari, webOS виробництва HP і Android, а також Opera Mobile і Opera Mini. Що стосується Windows Phone, з 2011 року на них встановлюється IE9 +, який забезпечує повну підтримку медіазапросов, що не може не радувати.
Більш ранні версії браузерів, включаючи IE8 і нижче, теж не проблема. Існують спеціальні JavaScript бібліотеки, покликані забезпечити 100% кроссбраузерность починаючи з IE5, наприклад, css3-mediaqueries.js або respond.js.
Хто досі зовсім не знайомий з медіазапросамі, може пошукати інформацію в довідниках , Або розібратися по ходу статті, нічого складно в них немає.
Ось основне застосування медіазапросов в нашому адаптивному випадку:
@media (max-width: 1150px) {CSS код}
наприклад:
@media (max-width: 1150px) {img {max-width: 100%; height: auto;} #subs form {background: none;}}
Це можна читати так: якщо розмір екрану дорівнює або менше 1150px, то застосувати вкладені правила. Цей код вставляється в будь-яке місце звичайного .css файлу, як і будь-який інший CSS код.
Що відбувається в прикладі вище? Якщо екран відвідувача дорівнює або менше 1150px, то зробимо зображення гнучкими і приберемо фон з заданого елемента.
Відразу зауважу, що зображення можна було зробити гумовими відразу ж (для будь-яких розмірів), не обов'язково було поміщати цей код в медіазапрос, але мені так здалося логічніше.
Завдяки таким медіазапросам, які мені нагадують конструкцію if (умова) {виконати} з PHP або інших мов програмування, ми розбудовуємо стилі сайту в залежності від розмірів екрану як нам заманеться.
Ось як побудовані медіазапроси на даному блозі для забезпечення повної адаптивності:
@media (max-width: 1170px) {img {max-width: 100%; height: auto;} #menu> li {font-size: 22px;} #menu> li> a {background: none; padding-left : 20px;} #subs form {background: none;}} @media (max-width: 990px) {#gwNotice {display: block; background: orange; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px;} h1 {margin: 30px auto; font-size: 30px;} #slogan {display: none;} #width {width: 98%;} #up {display: none;} table.gsc-search-box {position: absolute; top: 82px; left: 0; height: 30px; width: 275px! important;} .gsc-input-box { width: 200px;} #h ul {text-align: center; background: url (/images/footer.png); width: 100%;}} @media (max-width: 900px) {#menu> li {font -size: 20px;} #r {font-size: 14px;}} @media (max-width: 820px) {#menu {text-align: center; padding-top: 3px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} #menu> li: first-child {display: none;} #menu> li {display: block; margin-top: 10px;} #menu> li> a {padding: 0; display: block;} #hidden {display: none! important;}} @me dia (max-width: 680px) {#menu> li {display: block;} #c {width: 100%;} #r {display: none;}} @media (max-width: 506px) {table.gsc -search-box {top: 108px;}} @media (max-height: 650px) {#p {position: static! important;}}
Тобто в медіазапросах все індивідуально, ви вписуєте туди ті зміни, які потрібні для конкретного сайту при певному розмірі браузера. Для наочності ви можете змінювати розмір вашого дектопного браузера (ресайз) і стежити за поступовим застосуванням стилів, описаних вище. Саме так і працюють медіазапроси.
висновок
Хочу відзначити, що один із сучасних підходів до адаптивного дизайну полягає в тому, щоб спочатку розробляти макет під найдрібніші дисплеї (концепція «Спочатку мобільні»), а тільки потім, у міру збільшення розмірів дисплея довантажувати елементи на веб-сторінку (прогресивне поліпшення) за допомогою JavaScript. Сенс в тому, щоб не змушувати користувачів з телефонів завантажувати зайві дані, які вони все одно не побачать, сповільнюючи тим самим завантаження сторінок.
Якщо матеріалів даної статті вам недостатньо або щось не зрозуміло, то рекомендую до прочитання згадану на початку статті книгу Ітана Маркотт, в оригіналі вона налічує всього близько 170 сторінок.
Спасибі всім за увагу і успіхів в створенні адаптивних сайтів!
Будь ласка, оцініть цю статтю
Середня оцінка: 4.78 з 5 (проголосувало: 618)
Стаття виявилася вам корисною? Підпишіться, щоб не пропустити нові!
Ви можете допомогти розвитку проекту, зробивши всього 1 клік:
Дякуємо!
Ви, напевно, сподівалися, що я округлі це число?Що відбувається в прикладі вище?