Фиксированная и резиновая верстки
Одна из основных проблем верстки сайтов в том, что сайт может быть загружен, на огромном количестве экранов с разными размерами по ширине. При этом нужно добиться, чтобы сайт везде выглядел симпатично.
Для решения этой задачи возникло два подхода: первый, при увеличении размеров окна, мы растягиваем контент(резиновая верстка), второй делаем контейнер с фиксированными размерами и спокойно работает внутри него(фиксированная верстка). Оба подхода используются и по сей день, хотя бы как этапы адаптивной верстки.
В фиксированной верстке мы задаем ширину контейнера в пикселях и, как правило, выравниваем его посередине.
.container < width:980px; margin:0 auto; > В резиновой верстке ширина задается в процентах
Давайте посмотрим, что мы можем сделать с этим на практике.
В фиксированной верстке центральный блок имеет ширину обычно 980px, так чтобы помещаться на мониторы с любым разрешением, включая iPhone и iPad.
Резиновая верстка создается следующим образом. Когда Вы задаете ширину блока в процентах, проценты считаются от ширины родительского блока. Если Вы поместите такой блок внутрь body, то его ширина будет пропорциональна ширине экрана.
С вложенными блоками у нас есть два варианта — сделать их фиксированной ширины, а отступы между ними сделать резиновыми, либо сделать их пропорциональными ширине блока
Внутри одного сайта, мы можем комбинировать элементы резиновой и фиксированных версток.
Например, в приведеном ниже макете голубые полоски являются резиновыми и занимают всю ширину экрана, а блок по центру соответствует фиксированной верстке.
min-width и min-height
Если мы задали ширину блока в процентах, то при сжатии окна блок также будет сжиматься. Если мы хотим остановить этот процесс обжатия блока на каком-то моменте, чтобы, например, чтобы не страдал контент блока, можно задать минимальную возможную ширину блока
.container_fluid < width:100%; min-width:980px; > Давайте рассмотрим следующий шаблон
При уменьшении ширины серого блока, синий блок должен сохранять свою ширину, а белый должен быть резиновым.
Серый блок мы можем задать в процентах, но вот с белым блоком все сложнее. Его ширина — это ширина серого блока минус фиксированная ширина синего блока.
Для этого нам может пригодиться функция calc
Допустим ширина родительского блока 100%, ширина левой колонки 200px. Тогда ширину правой колонки мы можем записать как
НАЛИЧИЕ ПРОБЕЛОВ КРИТИЧНО!
Пропорциональное изменение ширины и высоты
Допустим наш шаблон выглядит вот так
Если блоки резиновые при сжатии, мы получим следующую картину
Происходит это потому, что ширина блоков при сжатии уменьшается, а вот высота остается неизменной. Даже если мы поставим высоту в процентах — это оставит ситуацию без изменений, так так высота сайта при его сжатии не изменяется.
Хотелось бы, чтобы блоки уменьшались пропорционально, то есть квадраты оставались бы квадратами
Добиться этого можно следующим образом. Поставить высоту блока 0px, а padding-top равным ширине. Например
.chained_sizes_block < height:0px; width:25%; padding-top:25%; > div class="chained_sizes_block"> div> Если Вы попробовали реализовать данную схему, нам остается понять, почему это работает:) Дело в том, что padding, указанный в процентах высчитывает эти проценты не от ширины самого блока, а от ширины блока-родителя, точно также как и ширина. Поэтому 25% в padding-top’e будут равны 25% ширины.
Фиксированные и резиновые верстки в дизайне
Если Вы верстаете сайт по PSD-шаблону или другому графическому файлу, у Вас может возникнуть вопрос — какую верстку хотел применить дизайнер? Если дизайнер имеет хотя бы минимальный опыт в веб-дизайне — ответ прост. Если у элемента нет полей по бокам — подразумевается его резиновость. Если поля есть, значит скорее всего верстка фиксированная.
- Резиновый шаблон с фиксированной левой колонкой
- Резиновый шаблон с двумя фиксированными колонками по бокам
- «Резиновая» галерея картинок
- Сделать, чтобы картинки были резиновые, а отступы между ними были фиксированные(шаблон должен занимать весь экран)
- Сделать два квадрата. Меньший квадрат должен быть посередине по вертикали и горизонтали меньшего
- Используя calc выровнять блок по центру экрана
- Сверстать шаблон сайта. Сайдбар справа фиксированный по ширине, синий хедер резиновый, блоки контента фиксированные по ширине и выровнены посередине хедера.
- Шаблоны c http://signature.ai/
results matching » «
No results matching » «
Разница между фиксированной, резиновой, адаптивной и отзывчивой вёрсткой
«Резиновый», «адаптивный», «отзывчивый» сайт. Что это такое, что выбрать, что лучше, в чём разница?
Я сама использую эти слова как синонимы. Точно также как и «вёрстка», «шаблон», «дизайн». Я делаю неправильно. Это обусловлено, с одной стороны, погоней за ключевыми словами, с другой, тем, что я одновременно являюсь и заказчицей, и исполнителем. Мне не нужно писать самой себе технических заданий. Я вижу конечную цель. А вот при заказе сайта у веб-студии, разница может быть существенной.
Для того, чтобы увидеть её, создадим простейший пример: два рядом стоящих элемента.
#temnyi < display: inline-block; background: cyan; >#svetlyiспособверстки
И посмотрим как они ведут себя при изменении ширины окна браузера.
Фиксированная верстка
Блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.
Резиновая вёрстка
Блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.
Адаптивная вёрстка
Воплощается с помощью @ Media или благодаря скриптам (например, как для AdSense). Заточен под конкретные известные устройства (320, 768, 1024, т.д.). Любое изменение происходит рывками, после достижения одного из указанных уровней. Однозначно подходит для создания версии для печати. Автор подхода — Aaron Gustafson.
Отзывчивая вёрстка
Это объединение резиновой и адаптивной вёрстки. В реализации самая сложная. Но результат получается наиболее приемлемый. Можно с уверенностью сказать, что сайт приспособится к любому устройству. Автор подхода — Ethan Marcotte.
Мобильная версия сайта
Фактически это другой сайт, с другой вёрсткой и дизайном. Он имеет отдельный URL (поддомен m.site.ru или папка site.ru/m). На него происходит перенаправление пользователя с основного проекта, если тот использует телефон.
16 комментариев:
Космо Мизраил Вай-вай) у меня Отзывчивая вёрстка 😀
Пример n-p-tib.forumkz.net/forum
Прячутся виджеты и убирается отступ на небольших экранах.
Только вчера закончил диз писать 🙂 Правда, есть ограничение по ширине всё-таки — 900 пикселей минимум для body — но для всего остального есть мобильная версия.
Если бы не ваш блог, никогда бы не научился пользоваться медиатипами. Вообще я обычно w3schools пользуюсь как справкой — там самая полная и актуальная информация о всех веб-технологиях — но в длиннющем списке функций и стилей невозможно найти такое чудо 🙂
乂◕‿◕乂 NMitra А я даже не знаю чем пользуюсь, всем подряд. Про «шпаргалку» вообще молчу, постоянно по страницам лазаю, хотя статьи писала сама 🙂
Нравится css-tricks.com и stackoverflow.com. Многое можно найти в w3schools. Анонимный А вот это — адаптивная или отзывчивая: http://plastilin5.com/tools/? NMitra Скорее резиновая 🙂 Космо Мизраил Полезная штучка.
Резиновая) однозначно) Космо Мизраил Горыныч Для эстетичной плавной трансформации в компактный/расширенный вид при адаптивной (а т.ж. и отзывчивой) верстке сайта можно использовать свойство transition. Такое используется на википедии.
Но у меня нередко транзишн висит на каждом пятом элементе и всё само собой так сглаживается :\ NMitra По мне, так это лишнее. Сомневаюсь, что обычный посетитель будет так играться. Я, например, не смотрю как тот или иной сайт выглядит при сжатии. А тех, кто знает, что там вообще будет что-то происходить единицы. Космо Мизраил Горыныч При использовании портативных устройств с акселератором поворот экрана может вызвать сжатие. Кроме этого, я нередко ставлю пару приложений в две колонки =)
В целом, фигня ненужная этот плавный переход на сайте, но вызывает столько симпатии к сайту :3 Юрий Наташа, уже сверстал несколько «резиновых» тем, но в «адаптивку» пока не лезу. Хочется полностью освоить именно «резину». Честно говоря, не понимаю, где ее можно использовать в чистом виде. При уменьшении ширины экрана синхронно сужается весь контент. Кому будет приятно просматривать, например, вытянутые по вертикали изображения или текст? Так понимаю, что «резина» — это заготовка для «адаптивки» или отзывчивой верстки? Или я ошибаюсь? NMitra Да, в большинстве случаев так. Правда появляются такие свойства как display: flex; и column-count http://css-tricks.com/guide-responsive-friendly-css-columns/ где адаптивность уже встроена. Юрий Даже не слышал о таких свойствах. Спасибо за ссылку, Наташа! Включил «переводчик» и вскользь «пробежался» по тексту. Завтра глубже ознакомлюсь со статьей. Анонимный Хочу получить по яйцам от красивой девушки NMitra . Анонимный Аноним — наш человек 😀 Админ Доброго времени суток.
А можно копию вашего шаблона?
Дело в том что я сам это нормально не сделаю.Хотя понимаю что это обычный родной простой гугловский шаблон (просто изменили на адаптивный Вы) и уверен по любому там изменено, я многое сам не сделаю.Поэтому очень хотелось бы шаблон профессионала.
Как Вы на это смотрите.поделитесь. NMitra Доброе время суток.
К сожалению, шаблон «Шпаргалки блоггера» не могу дать. Есть уже узнаваемость у посетителей, плюс шаблоны в единственном экземпляре ценятся поисковой системой выше.