| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > помогите разобраться с эластичной версткой |
| Автор: xrustic 24.1.2012, 21:16 |
| сверстал шаблон http://test.privilegia66.ru/, но верстка получилась не эластичная. суть в том, что на любоммониторе с любым разрешением должно отображаться одинаково. посмотрите кто умеет своим опытным взглядом. что я не так делаю. файл со стилями прилогаю прилагаю. |
| Автор: liliana2 25.1.2012, 11:15 |
| сразу что первое бросается в глаза это не резиновость по высоте (фон документа почемуто черный - зачем?) И на эту тему для начала хочется дать почитать это: http://softwaremaniacs.org/blog/2006/06/14/css-layout-flex/ --- Скорее всего после прочтения вы сами без труда разберетесь в своей проблеме. |
| Автор: Deadcow 4.2.2012, 14:42 |
| Всё изначально сверстано не правильно (если смотреть в плане "резиновости"), все блоки фиксированной ширины и сам макет не предполагает маштабирования. В первую очередь пересмотрите макет. В первую очередь - огромный не маштабируемый слайдер с перечислением "достоинств компании", который в общем то не оправдывает своего функционала (как слайдер). Он в любом случае не позволит сделать резины и на маленьких ноутах, не говоря уже о планшетниках и смартфонах - превратит просмотр сайта в пытку. Потом - пропорциональное маштабирование не подходит (пропорциональное уменьшение блоков), поэтому нужно продумать макет и реализовать его плавающими блоками. Например - блок со списком "Зарегистрировать организацию, ИП, Ликвидировать организацию и т.д." и блок с текстом располагаются друг за другом. Можно сделать так, что бы при уменьшении разрешения второй блок "падал" под первый, при этом блок со списком мог бы занимать всю ширину.. таким образом можно оптимизировать макет до идеального отображения на разных устройствах, НО можно пойти другим путём - можно смоделировать совершенно разные макеты под разные разрешения экранов. Часто делают три макета - для больших экранов, для планшетников и для смартфонов, реализовать всё переключением css файла в зависимости от ширины рабочей области браузера. Таким образом, всё тот же сайт на самых маленьких экранах можно переверстать вообще без графики (или оставив маленьких логотип), с большими текстовыми ссылками и аккуратными текстовыми блоками. Информацию о том, как это можно реализовать http://seodiz.ru/media-width-styles Еще вы можете посмотреть, очень интересный http://fittextjs.com/, который позволяет пропорционально разрешению маштабировать любой контент, но вы должны понимать, что опять же без переделки макета он вам не подойдет (иначе, если просто уменьшить ваши блоки текста, например, раза в два - они станут нечитаемыми) |