Столкнулся с небольшой проблемкой, когда увидел один из своих сайтов на экране 1024х768, который не влез в размеры экрана и отображался с горизонтальной прокруткой. Честно говоря, я даже и не пытался учесть, что такие экраны еще в ходу ))
Данный сайт тоже будет кривым на 1024 и ниже т.к. у него фиксированная ширина в 1080 пикселей и я его не буду оптимизировать под "вымирающие" технологии в виде квадрата 1024 ибо нужно в корне менять структуру. Мобильные платформы я учел - имеется отдельная версия и это полностью все меняет.
Но вот коммерческие проекты просто обязаны охватывать всю аудиторию с пк от 1024, до 1920 и не забыть про мобильную, а там экраны вообще мелкие.
Для проверки отображения сайта на разных разрешениях экранов есть онлайн сервис
Screenfly, который показывает сайт на разных экранах. Есть список из стандартов, но можно задать любое разрешение.
Ладно, верстаем резину, что на скриншоте выше с двумя правыми сайдбарами, которая будет сжиматься до 1024 (т.е. не будет горизонтальной прокрутки) и растягиваться до 1200px. При этом нужно не забыть об адаптивности картинок ибо шапка шириной в 1200px просто так не сожмется до 1024 и будет "выпирать".
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
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 - любой отступ по ширине автоматически увеличивает размер блока и он соскакивает вниз.
