У цій статті розглянемо, як блоковий каркас сайту, створений нами в попередній статті, зробити гумовим.Спочатку про те, що з себе представляє гумовий каркас сайту, і чим він відрізняється від простого блочного каркаса, і навіщо він потрібний.
Вся справа в тому, що монітори мають самі різні розміри, від малесеньких мобільних, до величезних домашніх кінотеатрів. А, припустимо, блоковий каркас має фіксовану ширину в 900 px.
На мобільному моніторі у сайту з’явиться смуга горизонтального прокручування, і переглянути сайт, можна буде тільки пересуваючи прокрутку, тобто частинами, уміщається у вікні екранчика. А на моніторі шириною більше 2000 px, наші 900, будуть виглядати як тонка смужка. А адже, зазвичай, великі екрани встановлюються, на значній відстані від користувача. Для цього, розробка сайтів луцьк зручно відображатиметься на розширеному моніторі будучи резиновим сайтом.
І в тому і в іншому випадку, перегляд сайту з фіксованою шириною, буде дуже незручний. Тому й потрібен так званий гумовий каркас, щоб користувачі з екранами будь-яких розмірів, могли комфортно переглядати Ваш ресурс.Давайте детально розглянемо, як створити гумовий каркас сайту з блочного каркаса, який ми створили в двох попередніх статтях.
Для прикладу візьмемо каркас з двома колонками, розташованими праворуч і ліворуч від контенту.
Наше завдання зробити так, щоб всі елементи пропорційно і коректно міняли свій розмір, залежно від розміру монітора, і не ставали схожими на картинку, розташовану на початку посту.
Отже, блоковий каркас сайту з двома боковими колонками.
Тепер візьмемо код цього каркаса, і подивимося, що в ньому потрібно змінити. А змінювати будемо, в основному, одиниці виміру у властивості width. У цьому коді вони задані в пікселях, і ширина блоків, таким чином, є фіксованою. Ми ж будемо задавати їх у відсотках. І відсотки ці будуть братися від ширини екрану, а так як екраном у нас є тег body, то він, за замовчуванням, становитиме 100%.
Як бачите, всі блоки рівномірно зменшилися, щодо розміру вікна браузера. Якщо це вікно збільшити, то всі блоки так само пропорційно збільшаться.
Висота блоків не враховується, оскільки вона залежить від змісту, і на читабельність не впливає.Однак це твердження не підходить для зображень. За замовчуванням, розмір картинок задається в пікселях. І, щоб їх розмір так само змінювався, як і у блоків, відповідно розміру екрану, його потрібно задати у відсотках, і ширину, і висоту.
Якщо висоту зображень не поставити у відсотках, то вони, на різних моніторах будуть витягатися в висоту. Те ж саме відноситься до зображення в шапці сайту, і відповідно, до висоті блоку header.
Якщо ж шапка сайту прикрашена розмноженим зображенням, або фоновим кольором, то ставити їй висоту не потрібно, так як вона, по любому, визначитися змістом.