Ті, хто хоч трохи щось розуміє в процесі верстки сайтів, зазвичай стикаються з термінами «гумовий макет», «тягнеться ширина» і т.д. Все це терміни, які безпосередньо стосуються гумової верстки сайту. Що це таке? Давайте подивимося.
Прості види верстки можна розділити на фіксовану і гумову. У чому особливість гумових розмірів? Ширина блоків змінюється зі зменшенням або збільшенням ширини вікна браузера. Наприклад, якщо ви прописали вашому сайту ширину в 100%, то у нього ніколи не з'явиться горизонтальний скрол (смуга прокрутки), скільки б ви не зменшували вікно. Тут, я думаю, зрозуміло. Приклади таких макетів можна знайти в інтернеті.
Роль max-width і min-width в гумовій верстці сайту
Прописування максимальної і мінімальної ширини блоку з ідентифікатором «wrap»
Отже, завжди задавайте max-width, min-width замість того, щоб просто писати width, тобто фіксовану ширину. Її можна прописувати безпосередньо дочірнім блокам, але ніяк не загальним контейнерів. Це також закладає адаптивність. Застосувавши на пару з max-width пару медіа запитів можна зробити свій сайт адаптивним, що значно поліпшить його зручність для мобільних користувачів.
Якою має бути гумова верстка на div-блоках?
Як я вже і сказав, просте завдання ширини в процентах не зважає хорошим тоном верстки. Якщо ви пропишіть разом з цим max-width і min-width, то отримаєте набагато більш гнучкий макет. Я пояснюю чому.
Хочете позбутися від цих проблем? Хочете, щоб сайт добре виглядав на всіх пристроях? Так прописуйте ви мax-width і min-width. Така гумова верстка буде набагато більш універсальною.
Гумові блоки стискаються завдяки тому, що їх контейнеру задана максимальна ширина.
А тепер заходять на ваш сайт з мобільника. Людина вже не побачить стислий донезмоги блок, але для цього, знову ж таки, потрібно дописувати медіа-запити (тобто реалізовувати адаптивний дизайн).
А про це ми поговоримо наступного разу. А поки грамотно використовуйте гумові блоки і не забувайте підписуватися на оновлення блогу.
Вам також може бути цікаво