Резиновый сайт

Резиновый сайт

Большой разброс разрешения экранов пользователей от 3840x1080 до мобильных 228x240 говорит о необходимости применения резиновых сайтов, которые успешно выглядят на любом устройстве. Сократите ширину окна браузера данного блога Сократить ширину окна браузера и вы увидите как страница видоизменяется. резиновый сайт Шаблоны с фиксированной шириной имеют либо куцый вид, либо не помещаются в окне браузера. Пример.

Рекомендации для тех, кто решил сделать сайт с отзывчивой вёрсткой

  1. Шрифты, отступы указываются в em или vmin.
  2. Картинки, видео также адаптируются под размер экрана.
  3. Определяется минимальная и максимальная ширина сайта чтобы композиция не расползалась, чтобы посетители широкоформатного монитора не говорили о необходимости взять такси для использования функций противоположной стороны веб-ресурса.
  4. Указывается максимальная длина строки (не более 45—50 символов для текста, набранного 12-пунктовым кеглем). Не зря у Google и Яндекса 16px заголовок не превышает 70 знаков.
  5. Меняется расположение блоков для разных разрешений экрана монитора с помощью @ 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 для мобильного телефона.

в f t
наверх ↑

22 комментария:

Анонимный
Здравствуйте. Как написать вам в обратную связь?
Анонимный
В дополнение к моему комментарию выше. У меня есть один вопрос по сайту, касающийся тематики. Давать ссылку на сайт в комментарии мне не хочется. Ссылок на вашу почту я не нашел. Моя почта hardmemory@mail.ru. Если вас не затруднит, напишите пожалуйста. А вопрос о том, как зафиксировать сайт, чтобы он не растягивался. Нужен совет, а не ответ. Т.к. я понимаю, что никто разжевывать не будет.
Саня
Можно сделать это для cms
NMitra
Если есть доступ к HTML и CSS, то я не вижу причин. Я, например, взяла стандартный шаблон Blogger, убрала всё лишнее, добавила необходимое. Но нужно разбираться во внутренностях CMS.
Aldous Snow
> которые успешно выглядят на любом устройстве
Читаю новости на своём самсунге. 80% сайтов выглядят наперекосяк. Отлично смотрятся только откровенно текстовые версии. А это киты вроде РБК. Так что пока ни разу не видел идеальных и сложный решений для мобильников на довольно низких разрешениях.
NMitra
"80% сайтов выглядят наперекосяк" - это же тебя не останавливает? :) У меня в блоге половина статей выглядит наперекосяк после смены дизайна. И не только на мобильниках :(

"шпаргалка" в Opera Mini более менее смотрится, только с меню не пойму почему буквы мелкими становятся. Хотя эту проблему не разбирала толком.

Надо признать, что в России не акцентируют внимание на мобильниках, в том числе и я. Тяп ляп и пошёл. Нужно смотреть зарубежные сайты, там большие суммы крутятся и следовательно больше внимание к мелочам.
Анонимный
какой же это резиновый, если нет ни одного процентного значения?
NMitra
Резиновая основная часть и фиксированная боковая. Именно этот вариант я предпочитаю, а не делить страницу на %. max-width не даст основному содержимому расползтись на весь экран в одну струну. Зато в обратную сторону без проблем будет подстраиваться под браузер.
NMitra
С другой стороны, я не совсем права с заголовком. Я уже упоминала, что резиновую и отзывчивую вёрстку в блоге почти всегда называю "резиновой", поскольку в конечном варианте стремлюсь именно к последней.
Анонимный
Очень занимательно, коротко и ясно. Думаю мы обязательно попробуем данный вариант верстки на нашем проекте"Аниме с рутуба"(anime-rutub.moy.su). На данный момент мы пока остановились на подмене стилей исходя из разрешения экрана пользователя, но интернет не стоит на месте и постоянно развивается и поэтому нужно постоянно учиться!
Анонимный
Я думаю что надо серьёзней к этому отнестись!
Тихомир
На самом деле с резиновым сайтом все не так просто. Трудности, с которыми придется столкнуться
1. невозможность сделать резиновыми рекламные блоки (решаемо)
2. невозможности пропорционального растяжения видео, флеша, картинок (решаемо)
3. неправильное "перескакивание" дивов при масштабировании сайта. правый див, если ему не хватает места, перескакивает под САМЫЙ нижний. (решаемо)

Все это решается при помощи js скриптиков, про которые мало кто пишет.
резиновая реклама, масштабируемые отступы и пропорциональное растяжение картинки, пример тут http://archizona.ru/index.html
пропорциональное растяжение флеша и видео тут http://archizona.ru/besedka_letnaya_kuhnya.html
правильное перескакивание дивов тут http://archizona.ru/tanu4.html
чтобы посмотреть как тянется сайт, нужно как и писалось в статье, потаскать правую границу.
NMitra
Тихомир, всё решаемо с @Media, да и без него многое. Скрипт нужен для рекламы, поскольку там считают показы http://shpargalkablog.ru/2013/06/adsense-kod.html
Тихомир
адаптивный и резиновый рекламный блок - это 2 разные вещи. Что такое @Media не знаю.
Мроя
NMitra, скажите пожалуйста, а как именно вы сделали, что боковой блок на вашем сайте на маленьком экране "улетает" в начало основной колонки (у меня улетает в основную колонку, но криво размещается - поверх шапки сайта), и к тому же меняет цвет? (не бейте тапками, я вообще психолог...)
NMitra
Смотрю-смотрю, цвет вроде не меняет. Уходит вниз? (если смотреть на Главной) Или не ту страницу смотрю?
Hive Med
Прочитал ваш №4 коммент. Я не могу разобраться с основными блоками макета Blogger. В смысле, у обычного сайта родительские блоки типа header, content, aside, footer и т.п. - все понятно как двигать и изменять их через css. В шаблоне блогспота же кощеева смерть - у каждого аутер, иннер, регионы, еще фауксколумнс какие-то (это вообще что?), куча вложений в общем. Вроде находишь родительский, начинаешь с ним что-то делать, тут же выясняется что у него какой-то свой более приоритетный стиль есть и т.д. Вы не могли бы написать айдишники и классы основных блоков простого шаблона блоггер?
NMitra
Если хотите верстать свой шаблон, то лучше делать это на шаблоне 2006 года (я молодец, сохранила его :)) https://sites.google.com/site/spargalka1/rating/minima.xml?revision=5 Там всё то же, только без "Дизайнера шаблонов", то есть код будет чище.
Hive Med
спс)
Hive Med
Действительно, так гораздо проще, и @media сразу работает нормально.
Aix
На мой взгляд идеальным решением было бы использование тега transform и выглядело бы это так
body {
top:0px;
transform: scale (100%);
}
Но увы проценты оно не поддерживает а жаль
NMitra
На мобильных тогда бы текст был слишком маленьким и трудночитаемым.