В Метриці для одного з сайтів сконструював звіт на вибірці в 400 000 відвідувачів (Рунет). Тільки 60% візитів відзначилися тим, що їх ширина вікна браузера була в діапазоні 400px - 1300px. У вас можуть бути інші значення.
«Гуму» використовувати можна, але в установлених межах (CSS-властивості min-width і max-width розуміють всі сучасні браузери). В умовах такого широкого діапазону клієнтської ширини вікна браузера хорошим тоном є верстка адаптивного макета.
В ідеалі, адаптивний макет повинен мати 4 варіанти відображення, відповідні 4-м типам пристроїв веб-серфінгу:
Числа не є канонічними і всього лише відповідають технічним тенденціям на даний момент. Стандартів адаптивної верстки я не знайшов. Значення взяті з сайту Bootstrap - движка адаптивного макета на базі HTML5 та CSS3 (оригінал - англійська).
Ці орієнтовні цифри дозволять нам відповісти на питання, поставлене на початку.
Яку вибрати ширину макета?
Але відповідь буде не один, а чотири:
- маленькі екрани - 95% ширини;
- невеликі екрани: - 750px;
- нормальні екрани: - 970px;
- широкі екрани: - 1170px.
У ці розміри закладена ширина вертикальної смуги прокрутки і невеликі відступи по краях (не гарно, коли контент прилипає впритул до краю екрану).
Виходячи з цих значень робимо висновки про ширину колонок. На маленьких екранах колонка буде одна, розташується по центру екрану і займе 95% його ширини. На невеликих екранах ви самі вирішуєте щодо доцільності додаткової колонки. Я б зробив вузький сайдбар (максимум 250px). На нормальних і широких екранах можна зробити широкий сайдбар (300px і більше). Якщо заробляєте на Adsense. в такий сайдбар добре поміститься «смачний» вертикальний блок 300 × 600. На широких екранах можна зробити 2 сайдбрара.
Як виконати адаптивну верстку?
Адаптивний веб-дизайн (англ. Responsive Web design) забезпечує глядабельний і читабельність сайту на будь-яких пристроях. У двох словах, покращує юзабіліті. Ключове слово «адаптивний» означає, що дизайн «пристосовується» під пристрій, на якому відображається. Тобто сайт виглядає по-різному, але найбільш підходящим чином для того пристрою, на якому відображається.
HTML5 CSS3 JS фреймворки для адаптивної верстки
Можна скористатися згаданим вище фреймворком Bootstrap (або будь-яким іншим). Плюс є очевидним: ви займаєтеся тільки дизайном, а за відображення на різних пристроях відповідає фреймворк. мінуси:
- потрібен час на освоєння;
- макет виходить перевантажений стилями і скриптами, більшу частину яких ви навіть використовувати не будете;
- в Інтернеті є неоднозначні висловлювання на рахунок кросбраузерності такого рішення.
CSS @media queries
Я вважаю, що краще рішення - найпростіше. Тому я скористався CSS-можливістю media queries. підтримку якої забезпечують всі сучасні браузери. А для підтримки браузерами IE молодше 9-й версії можна скористатися такою хитрістю (додати в
):Media queries в дії
Для прикладу я вказав правила тільки для #layout. це контейнер
Там, де в коді крапки, ви напишіть будь-які свої CSS-правила. Зокрема, управління розміром шрифтів, відступів, відображенням і приховуванням сайдбарі, шириною колонок та інше.
Принцип полягає в наступному. Спочатку браузер враховує ті стилі, які вказані в верхньому розділі CSS-файлу, названому мною «CSS-правила за замовчуванням». Потім йдуть конструкції @media screen and (.). які змусять браузер врахувати нові стилі, якщо виконається умова входження ширини екрану в зазначений діапазон. Якщо ж використовується якийсь браузер без підтримки media queries (рідкісний випадок) - він просто проігнорує ці інструкції, відобразивши «CSS-правила за замовчуванням» (так вирішується відсутність кросбраузерності підтримки). Тому по-замовчуванню я вказав правило, відповідне ширині звичайних екранів: ширина макета 970px.
Викладеного достатньо, щоб вже почати верстати адаптивний макет. Останнє ви можете застосовувати на свій розсуд або не застосовувати зовсім.
Хитрощі і тонкощі адаптивної верстки
Браузери мобільних пристроїв зазвичай намагаються підігнати ширину сайту під ширину екрану. Навіть якщо у вашого макета ширина 1500px, браузер Android або Chrome піджене розмір сайту під розмір екрану. Звичайно, при використанні media queries тут можна отримати несподіваний результат. Щоб заборонити браузеру масштабувати сайт, якщо ми самі управляємо розміром сайту, потрібно прописати в
інструкцію:А як бути з картинками, які ви завантажуєте на сайт в розмірі 600px в ширину? Як управляти їх масштабом при зменшенні тематичної колонки до 500px (наприклад, для планшетів)?
Досить в загальних правилах написати:
І тоді картинки займуть не більше 95% ширини контейнера, в якому знаходяться.
Обнулення і нормалізація встановлених стилів
При верстці будь-якого дизайну необхідно врахувати, що у кожного браузера є встановлені стилі для багатьох елементів. Наприклад, навіть якщо ми не вкажемо ніяких CSS-правил, заголовки будуть жирними і великими, між абзацами буде відступ, цитата відобразиться курсивом і т.д. Лише попередньо стилі різних браузерів відрізняються. Якщо ми пишемо свої стилі, доповнюючи встановлені в своєму браузері, велика ймовірність, що в іншому браузері на іншій системі сайт буде виглядати інакше. Перед тим, як писати свої CSS-правила, встановлені стилі треба обнулити і нормалізувати (привести до єдиного вигляду). У мене для цього служать 2 CSS-файлу:
Ці файли підключаю на початку основного style.css таким чином:
Перетворення меню в список на маленьких екранах
Потім в CSS просто відображаємо один з варіантів в залежності від ширини екрану:
На цьому прикладі можете здогадатися самі, як виконувати будь-які інші підміни.
Перетворення двоколонковому макета в один стовпчик на маленьких екранах
Створення многоколоночной макета (з фіксованої ширини сайдбарі і «гумовим» контентом, з двома сайдбарі і т.д.) - тема окремої статті. Для простоти в якості прикладу пропоную двоколонковому макет.
Вище я вже показував адаптивні CSS-правила для #layout - шару, в який обгорнутий контент. Не буду ускладнювати код повторенням. Просто майте на увазі, що описаний нижче код обгорнутий в шар layout, і для layout описані CCS-правила.
Назвемо основну колонку #content. а бічну колонку #sidebar. HTML:
Головне тут - розташувати сайдбар під контентом, щоб на маленьких екранах він відображався нижче, а не вище. А хочете ви розташувати бічну колонку на великих екранах зліва чи справа - за це відповідає CSS:
Макет в цьому прикладі є ліву колонку 70% ширини і сайдбар справа 27% ширини. Між ними відстань в 3% достатньо, щоб візуально не «злипалися». До речі, якщо думаєте, що вказані відсотки ширини вікна - це не зовсім так. Насправді, це відсотки ширини батьківського шару. Як уже писав, на практиці все вміст
обгорнуті в шар layout. Т.ч. якщо задам для layout ширину 1000px, то content буде розміром 700px, а sidebar - 270px.Потрібно використовувати те, що вам зручніше. Можна, наприклад, розмір шрифту вказати в пікселях, а міжрядковий інтервал: 1.5em, для створення полуторного інтервалу, щоб не переписувати це значення, якщо зміните розмір шрифту.
Як правило, зручно буває вказати базовий розмір шрифту (наприклад, для body) в px або pt, а решта - в відносних величинах (наприклад, 70% рівнозначно 0.7em). Тоді, в залежності від ширини екрану, достатньо буде змінити розмір базового шрифту, щоб інші підлаштувалися автоматично.
Сенс писати в статті код якщо я не можу його скопіювати? Або Ви думаєте, що його хтось буде передруковувати?
Крихітка син до батька прийшов, і запитала крихітка: «RSS адже добре? Це ж не погано? »У мене секретів немає, слухайте, діти. RSS мені іноді замінює книжки
Рубрики, теги
архіви блогу і календар знаходяться внизу сторінки. Щоб довго не гортати, посилання слід натиснути.
Повість минулих літ
Цей віджет, вважаю, корисним є лише для мене самого - подивитися пости минулих років, стимулюватися на написання нових постів
Чи не вважаєте назви деяких рубрик дивними? Може, ви мені запропонуєте більш грамотні назви, які б відображали ту ж суть в тій же короткій формі.