Резиновые сайты – это
сайты растягивающееся под размер экрана пользователя. Зачастую такой маневр делают для адаптации сайта или отдельных таблиц, плагинов под монитор или экран.
Вот в чем делема, почти всегда сделанные в таком стиле проекты выглядят не эстетично или вовсе не растягиваются на экран из за ошибок верстальщика или верстки в общем. Вот мы сейчас и научимся делать это правильно.
Первое, что нужно знать при разработке адаптивного сайта, что в html помимо пиксельных размеров можно задавать еще и процентные. Приведем пример, у нас есть таблица с шириной в 500 пикселей и свободной высотой, а нужно задать ширину на пол экрана:
1. table style=’wight=’500»
2. table style=’wight:500px;’
3. table style=’wight=’50%»
В примере 1. и 2. приведены примеры записи пиксельного расширения, а в примере 3. указан вариант процентного соотношения.
Размеры:
25% — четверть экрана
50% — пол экрана
100% — весь экран
Можно вписывать любые целые проценты (21, 11, 43, 78 …), и все они будут ровняться по экрану. Но как мы знаем таблицы – это еще не весь сайт, нужны еще картинки и плагины, текст и линии.
У картинок есть особенность установки размеров лишь в пикселях, но и тут мы сможем съязвить, к примеру есть картинка 1.png с шириной 700 пикселей, нужно адаптировать ее под экран:
1. img data-src=’/1png’
2. img data-src=’/1png’ wight=’500
3. table style=’background-image:url(/1.png); background-position: 0% 0%’ wight=’500
В примере 1. указана обычная запись изображения в html, а в 2. сжатое изображение до 500 пикселей. В примере 3. мы сразу положили картинку как фон таблицы, так картинка будет адаптироваться вместе с таблицей. Разберем код:
А) background-image:url(/1.png) – задали нашу картинку как фон
Б) background-position: 0% 0% — центрируем картинку в таблице, т.е. мы можем задать положение картинки в таблице где угодно, что нельзя сделать через тег img.
С этим все понятно, но что же делать с текстом? Ответ прост, нужно поместить текст в таблицу с одним столбцом и строкой и задать ей определенные пиксельные параметры и выравниваете по центру, так ваш текст не будет растягиваться, а будет оставаться в первоначальном виде!
Что касательно линий, в частности hr, просто задаем им проценты, так же как и с таблицами:
hr wight=’80%’
В противном случае линия будет растягиваться на всю таблицу!
Теперь вы знаете, как без труда адаптировать сайт статичной ширины в сайт с резиновой растяжкой содержимого.
