- Рекомендации для тех, кто решил сделать резиновый сайт
- Макет резинового сайта
- Колонки равной высоты HTML
- Резиновая верстка сайта с плавающей боковой колонкой
- Смещение на 1px в Опере, Гугл.Хром и Safari
- Резиновый шаблон у блогов на платформе Blogger
- Мобильная версия Blogspot
- Другой способ разместить плавающий блок рядом с родительским, выровненным по центру
- В чём состоит разница между резиновым и адаптивным сайтом
- Меню и шапка данного блога
Большой разброс разрешения экранов пользователей от 3840x1080 до мобильных 228x240 говорит о необходимости применения резиновых сайтов, которые успешно выглядят на любом устройстве. Сократите ширину окна браузера данного блога и вы увидите как страница видоизменяется. Шаблоны с фиксированной шириной имеют либо куцый вид, либо не помещаются в окне браузера. Пример.
Рекомендации для тех, кто решил сделать сайт с отзывчивой вёрсткой
- Шрифты, отступы указываются в em или vmin.
- Картинки, видео также адаптируются под размер экрана.
- Определяется минимальная и максимальная ширина сайта чтобы композиция не расползалась, чтобы посетители широкоформатного монитора не говорили о необходимости взять такси для использования функций противоположной стороны веб-ресурса.
- Указывается максимальная длина строки (не более 45—50 символов для текста, набранного 12-пунктовым кеглем). Не зря у Google и Яндекса 16px заголовок не превышает 70 знаков.
- Меняется расположение блоков для разных разрешений экрана монитора с помощью @ Media.
Макет резинового сайта
<style> main { /* основное содержимое */ position: relative; /* боковая колонка перемещается в рамках основного содержания */ margin: 0 auto; /* сайт располагается по центру экрана */ max-width: 1200px; /* резиновая, растягивается до значения в 1200px */ padding-right: 310px; /* = боковая колонка + отступ в 10px */ } aside { /* боковая колонка */ width: 300px; /* фиксированная, не меняется с изменением размера окна браузера */ position: absolute; top: 0; right: 0; /* прижата к верхнему правому углу */ } </style> <main> <aside>боковая панель</aside> </main>
Пример: см. данный блог.
Боковой блок одной высотой с основным содержимым
<style>
aside {
height: 100%; /* добавить к коду выше */
}
</style>
Пример:
Это не решает проблемы, когда боковая колонка более высокая, чем основное содержание. Лучше применить вёрстку со свойством display: table;.
Резиновая верстка сайта с плавающей боковой колонкой
<style> main { margin: 0px auto; max-width: 1200px; padding-right: 310px; } .pravo { /* боковая колонка прижата к правому углу */ float: right; margin-right: -10px; } aside { width: 300px; position: fixed; /* перемещается вместе с прокруткой страницы */ top: 9em; /* = шапке сайта */ z-index: 101; } </style> <main> <div class="pravo"><aside>боковая панель</aside></div> </main>
Пример (для чистоты эксперимента деактивизируйте предыдущую кнопку):
Смещение на 1px в Опере
<style>
.pravo {
-o-transform: translateX(-1px); /* при необходимости добавить к коду выше */
}
</style>
Резиновый шаблон у блогов на платформе Blogger
Нужно добавить CSS для группы шаблонов "Простая", "Венецианское окно" и "Путешествие":
body { padding-left: 10px; padding-right: 10px; } html body .content-outer { max-width: 100%; }Для "Корпорация "Чудеса"" и "Водяной знак":
html body .region-inner { padding-left: 20px; padding-right: 20px; max-width: 100%; }
Мобильная версия Blogspot
По адресу http://адрес_страницы?m=1 можно увидеть версию блога на Blogger для мобильного телефона.
22 комментария:
Читаю новости на своём самсунге. 80% сайтов выглядят наперекосяк. Отлично смотрятся только откровенно текстовые версии. А это киты вроде РБК. Так что пока ни разу не видел идеальных и сложный решений для мобильников на довольно низких разрешениях.
"шпаргалка" в Opera Mini более менее смотрится, только с меню не пойму почему буквы мелкими становятся. Хотя эту проблему не разбирала толком.
Надо признать, что в России не акцентируют внимание на мобильниках, в том числе и я. Тяп ляп и пошёл. Нужно смотреть зарубежные сайты, там большие суммы крутятся и следовательно больше внимание к мелочам.
1. невозможность сделать резиновыми рекламные блоки (решаемо)
2. невозможности пропорционального растяжения видео, флеша, картинок (решаемо)
3. неправильное "перескакивание" дивов при масштабировании сайта. правый див, если ему не хватает места, перескакивает под САМЫЙ нижний. (решаемо)
Все это решается при помощи js скриптиков, про которые мало кто пишет.
резиновая реклама, масштабируемые отступы и пропорциональное растяжение картинки, пример тут http://archizona.ru/index.html
пропорциональное растяжение флеша и видео тут http://archizona.ru/besedka_letnaya_kuhnya.html
правильное перескакивание дивов тут http://archizona.ru/tanu4.html
чтобы посмотреть как тянется сайт, нужно как и писалось в статье, потаскать правую границу.
body {
top:0px;
transform: scale (100%);
}
Но увы проценты оно не поддерживает а жаль