Азы резиновой верстки

Азы резиновой верстки


Столкнулся с небольшой проблемкой, когда увидел один из своих сайтов на экране 1024х768, который не влез в размеры экрана и отображался с горизонтальной прокруткой. Честно говоря, я даже и не пытался учесть, что такие экраны еще в ходу ))

Данный сайт тоже будет кривым на 1024 и ниже т.к. у него фиксированная ширина в 1080 пикселей и я его не буду оптимизировать под "вымирающие" технологии в виде квадрата 1024 ибо нужно в корне менять структуру. Мобильные платформы я учел - имеется отдельная версия и это полностью все меняет.

Но вот коммерческие проекты просто обязаны охватывать всю аудиторию с пк от 1024, до 1920 и не забыть про мобильную, а там экраны вообще мелкие.

Для проверки отображения сайта на разных разрешениях экранов есть онлайн сервис Screenfly, который показывает сайт на разных экранах. Есть список из стандартов, но можно задать любое разрешение.

Ладно, верстаем резину, что на скриншоте выше с двумя правыми сайдбарами, которая будет сжиматься до 1024 (т.е. не будет горизонтальной прокрутки) и растягиваться до 1200px. При этом нужно не забыть об адаптивности картинок ибо шапка шириной в 1200px просто так не сожмется до 1024 и будет "выпирать".

HTML
<div class="main">
<div class="logo">
<a href="/"><img src="images/logo.png" alt=""></a>
</div>

<div class="content">

<div class="c_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="c_mid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="c_rgt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

</div>

<div class="footer"></div>
</div>



CSS
.main{
width: 100%;
min-width: 1000px;
max-width: 1200px;
margin: 0 auto;
}


Мы задаем фиксированные минимум и максимум. Например, сайт 950 или 1220px стать не сможет, а ширину оставляем в 100 процентов. Не забываем и про скроллер справа, который так же забирает часть пикселей. В моем случае на него ушло около 15-20px, в общем - округлил).

Теперь считаем наши блоки с контентом и шапку:

.logo{
width: 100%;
float: left;
}

.logo img{
width: 100%;
float: left;
}


Небольшой трюк преобразования фиксированной и к тому же фактической ширины картинки в резиновую. Все что нужно, это задать ширину в 100%

.content{
float: left;
width: 100%;
}

.c_text, .c_mid, .c_rgt{
float: left;
margin: 0;
padding: 0;
}

.c_text{width: 60%;}
.c_mid{width: 20%;}
.c_rgt{width: 20%;}


Мы разбили наш контент на три блока и всем задали процентную ширину. Все. не забывайте про отступы padding и margin - любой отступ по ширине автоматически увеличивает размер блока и он соскакивает вниз.


Понравилась статья "Азы резиновой верстки" из раздела Веб разработка » HTML/CSS? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 1657   Дата: 07-фев-2015, 13:52

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика