CSS макеты фиксированные, резиновые, эластичные


Оглавление (нажмите, чтобы открыть):

Трехколоночный резиновый макет сайта

Приветствую Вас в очередном уроке, который будет посвящен сегодня языку CSS. И мы реализуем с Вами трехколоночный резиновый макет для сайта. В дальнейшем Вы просто можете копировать этот каркас и приступать к созданию сайта. Макет будет состоять из таких блоков как: шапка сайта, левый сайдбар, правый сайдбар, область контента и футер. Ничего сложного, обычный, довольно просто шаблон. Ну что же, пришло время его реализовать. Для начала напишем следующую структуру html кода:

Как переделать сайт с фиксированными размерами в сайт резиновый?

Есть ещё блок content (width — 810px) и блок aside (width — 220px).
Если в блоке content паддинг — 10px, то как нужно правильно перевести его в проценты, только чтобы размер относительно wrapper оставался такой-же! Ведь новый размер article — 78,26% (939,13px).
Подскажите формулу, по которой нужно расчитывать новый размер отступов для внутренних блоков

Добавлено через 3 часа 7 минут
.

03.03.2015, 22:07

сайт фиксированый, возможно ли его переделать на резиновый?
Подскажите, пожалуйста, если изначально сайт делаешь фиксированый, возможно ли его переделать на.

Как сделать резиновый сайт
Помогите с решением проблемы. У меня есть картинка. Мне нужно её разместить рядом с таблицей.

Как правильно верстать резиновый сайт?
Кто знает, подскажите, как правильно верстать сайт таким образом чтобы при уменьшенном экране сайт.

Не могу понять как создать резиновый сайт
Не могу понять как создается резиновый макет. Тоесть каким элементам какие значения присваивать.

03.03.2015, 22:24 2

Добавлено через 41 секунду
зависит как у тебя там сверстано — может все переделывать надо

Добавлено через 1 минуту

03.03.2015, 23:09 [ТС] 3 03.03.2015, 23:11 4

phpk, а что тут сложного? Возьмём Ваш блок wrapper-1035px, в него вложен блок content — 810px, тогда решаем незамысловатое уравнение:

1035px — 100%
810px — x
x=810*100/1035

Если отступ допустим margin-left:20px, тогда, чтобы перевести его в резину уравнение примет вид:

1035px — 100%
20px — x
x=20*100/1035

Думаю принцип ясен. А самое главное важно усвоить, что сумма отступов слева и справа + ширина блоков = 100% ширины родительского блока. Сумма отступов снизу и сверху + высота блоков = 100% высоты родительского блока. И нужно понимать по отношению к какому блоку считаете резину для блоков и для отступов.

Как сделать страницу резиновой. CSS макеты: фиксированные, резиновые, эластичные. Одинаковая высота колонок

Резиновый макет с тремя колонками, пожалуй, самый гибкий и настраиваемый из существующих макетов. Сочетание процентов и пикселов для указания ширины колонок позволяет делать разные макеты, выбирая их под свои задачи. На рис. 5.17 представлены варианты трёхколоночных макетов, для удобства они пронумерованы.

Рис. 5.17. Трёхколоночные макеты

Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px — ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты.

Использование позиционирования

Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position со значением relative , а дочерним элементам, которые формируют колонки, значение absolute . Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13.


Пример 5.13. Две колонки в пикселах или три в процентах

Резиновый веб-дизайн. Что и куда будем растягивать? CSS макеты: фиксированные, резиновые, эластичные

От автора: приветствую дорогих читателей моего блога! Наверняка многие из вас уже слышали легенды о драконах, Санта-Клаусе и непонятном звере под названием резиновый веб-дизайн, который способен менять свою форму. О первом персонаже вам поведают рукописи Джона Толкина, о втором родители, а вот информацию о третьем я беру на себя. Как бы странно это не звучало, однако, в этой статье я постараюсь разжевать резиновый веб-дизайн и расскажу о его преимуществах и недостатках.

При разработке сайта веб-мастер, в первую очередь, должен отталкиваться от целей проекта. Если заказчику важно, чтобы веб-страница могла подстраиваться под любой экран монитора, то здесь на помощь придет резиновый (адаптивный) дизайн.

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

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

Зарождение резинового веб-дизайна

В качестве интересного наблюдения можно отметить тот факт, что в нашей стране «резиновый» веб-дизайн специалисты начали воспринимать с позитивной точки зрения раньше, чем на западе. Дело в том, что там при зарождении веб-направления в эту сферу пришло большое количество узкомыслящих полиграфистов.

Зарубежные специалисты попросту не осознавали возможности создания нефиксированных графических разработок. А вот к нам понятия «веб» и «дизайн» пришли практически равномерно, вследствие чего подобная визуальная гибкость изображения воспринималась разработчиками как обычная творческая свобода.

Резиновый и адаптивный веб-дизайн — это одно и то же?

Зачастую люди путают эти два понятия, однако, они не являются чистокровными синонимами друг друга. Адаптивный веб-дизайн подразумевает работу с различными макетами сайта в целях создания максимального удобства их использования на всевозможных типах устройств, учитывая всевозможные разрешения экранов.

Он «разумно» подгоняет общую картинку под экран в зависимости от размера дисплея на аппарате. Ну а резиновый дизайн — это, по сути, один из элементов адаптивного веб-дизайна. Он, в свою очередь, лишь вносит изменения в пропорции веб-страницы.

Таким образом, можно прийти к выводу о том, что адаптивный веб-дизайн представляет собой комбинацию из резинового, а также прочих прогрессивных улучшений. Хотя из-за близких по духу определений порой и может возникать путаница. Особенно неприятно, когда разногласия в этом плане происходят с заказчиком, поэтому будьте внимательны и всегда уточняйте, что клиент имел ввиду, говоря о резиновом дизайне сайта.

Преимущества резинового веб-дизайна

Благодаря резиновому дизайну css у вас есть возможность разработки веб-страницы, которая бы заполняла все свободное пространство браузера вне зависимости от размеров экрана. Если произойдут какие-либо изменения параметров, связанные с разрешением, вся структура сайта вновь подстроится под обновленные условия. Чудеса и волшебство, не правда ли?

Подобная особенность гарантирует тот факт, что веб-страница полностью займет браузерное окно независимо от того, отображается картинка на малютке HTC или на 20-ти дюймовом широкоформатном мониторе. Именно это и можно отнести к основному преимуществу резинового дизайна.

Те пользователи, которые обладают маленькими мониторами, не испытывают проблем с горизонтальными полосами прокрутки, а вот владельцев больших широкоформаток они порою тревожат. Следовательно, в этом плане вторые смогут сполна насладиться картинкой, ведь вся площадь дисплея будет эффективно задействована.

Если рассматривать вопрос того, для каких сайтов подойдет резиновый веб-дизайн, то здесь все зависит опять же от целей заказчика. Данная визуальная гибкость будет хорошо смотреться на тех сайтах, у которых приоритетной задачей является размещение на одной веб-странице максимального количества контента, а эстетические нормы отходят на второй план.

Именно исходя из этого резиновый веб-дизайн широко применяется при создании новостных порталов, блогов, а также всевозможных информационных сайтов. В этих случаях его применение наиболее целесообразно.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Недостатки резинового веб-дизайна

Помимо положительных моментов, подобный веб-дизайн обладает и некоторыми специфическими минусами. Один из них заключается в том, что, по сути, итоговый результат «автоподстраивания» страницы под определенные условия разрешения экрана непредсказуем. Некоторые графические элементы на сайте могут внезапно оказаться на другом месте, так как их вытеснили соседние коллеги.

Еще одним недостатком подобной «резины» является тот факт, что загрузка страницы с ним может увеличиться в 2–3 раза по сравнению со стандартной длительностью. Случается это по причине придирчивости некоторых браузеров к макетам страниц данного формата. Они тяжело справляются с задачей отображения элементов переменной ширины, вследствие чего также повышается риск возникновения визуальных ошибок.

Примеры резинового и адаптивного веб-дизайна

Для наглядности я хочу продемонстрировать вам несколько удачных примеров резинового и адаптивного дизайнов от достаточно успешных разработчиков.


1. http://www.simplebits.com/

Для начала рассмотрим резиновый сайт одного американского блогера, занимающегося параллельно веб-разработками. Полная версия сайта:

Мобильная версия сайта:

Как видим, в этом случае картинка лишь подстраивается под размеры устройства, а общая структура сайта остается неизменной.

2. http://www.fork-cms.com/

Теперь же предлагаю ознакомиться с веб-сайтом, который адаптируется под определенное устройство и в зависимости от его размеров перестраивает полностью собственную структуру. Полная версия сайта:

Мастер Йода рекомендует:  Как включить поддержку javascript в наиболее популярных браузерах Javascript

Мобильная версия сайта:

Вот так-то. Надеюсь, сегодняшний материал был интересен, и вы не зря потратили свое время. Если это так, то оставляйте комментарии по этому поводу и делитесь собственным мнением. Мне приятны как позитивные отзывы, так и экспертные заключения мастеров веб-дизайна 2.0. Подписывайтесь на блог, чтобы не пропустить дальнейшую интересную и полезную информацию.

На этом у меня все, скоро увидимся!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.

Фиксированная ширина макетной сетки
«Резиновая» макетная сетка по ширине окна

Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.

Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже — это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.

Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе , для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.

Резиновый div. Div для резиновой верстки

В этом уроке я опишу простой, но очень полезный прием, который пригодится при создание резинового шаблона это — Резиновый div. Допустим вам понадобилось сделать блок, который бы растягивался в зависимости от разрешения экрана. При большом разрешение ширина div была бы одной при маленьком разрешение другой.

Для того чтобы получить резиновый div нужно прописать следующий css код:

3 комментария на «“Резиновый div. Div для резиновой верстки”»

«при разрешениИ». Исправтье ошибки (

ты сама что ли очень грамотная.

спасибо. Ничего не исправляйте. Художника обидеть может каждый. Не каждый может убежать ��

Принципы резиновой верстки сайта


Резиновый веб-дизайн с HTML5 и CSS3 позволяет нам создавать веб-страницы, которые способны адаптироваться согласно ширины окна браузера. HTML5, CSS3, JS позволяет более быстро превратить ваш сайт в резиновую модель.

Для создания резиновых веб-страниц, мы должны знать, как работать с: резиновым макетом, резиновой шириной, резиновыми: текст и изображения, видео и ифреймы, резиновые: margin и padding, таблицы и формы, адаптивное меню.

Методы верстки резиновых веб-страниц.

Основной идеей для создания резинового макета с HTML5 и CSS3 является определение размеров элементов страницы в процентах или EMs, что позволяет элементам веб-сайта атоматически изменять размер в соответствии с размером окна браузера.

Для создания резинового макета используется формула: target ÷ context = result

  • target — размер шрифта(или ширины) которые мы имеем в пикселях(ширина рассчитывается в % и размер в em)
  • context — размер шрифта, если он не задан для body то можно к примеру использовать тот который установлен по умолчанию(для Mozilla это 16px).
  • result — результат который мы получим в em или %

В общем, преобразования размера элемента с пикселей в проценты или EMs делается относительно его родительского элемента, смотрите примеры:

В данном примере видим что при условии если мы хотим сделать размер текста для header h1 font-size: 18px; и line-height: 20px; нам необходимо расчитать размер в EM согласно его родительского элемента, то есть body: font-size: 13px; line-height: 18px; в резултате получаем font-size:1.384615384615385em; и line-height:1.111111111111111em;

Резиновые: макет, ширина, margin и padding.

Создаём section, где мы расположим два asides:

В этом примере вы видите, что у нас есть section с максимальной шириной: 83em эквивалентной 1328px и внутри мы имеем два блока каждый с шириной: 47%, и если мы изменяем размер экрана браузера наши внутренние блоки всегда будут иметь ширину: 47% и padding: 1%

Текст и изображения в резиновой верстке

Этот метод CSS позволяет изменять размер изображения автоматически в соответствии с размером экрана, текст каждого элемента на веб-сайте может быть задан персонально, так как для всего документа задан размер шрифта font-size:100%.

Резиновый дизайн: формы, таблицы, меню

Пример адаптивной контактной формы.

Для создания таблиц и меню у нас есть две возможности: первая заключается в использовании JS(JQuery), и вторая с помощью Media Queries заточить свой сайт под свои нужды.

Создать резиновую таблицу можно следующим способом:

В случае, если некоторые элементы страницы не имеют размер в процентах, то есть имеют фиксированный размер: списки или боковая навигация. В этом случае для избежания того чтобы сайт не предстал в неприглядном виде на экранах с большим и малым разрешениями, в этих случаях задаётсяmax-width и min-width, чтобы вашим сайтом могли пользоваться пользователи без каких-либо проблем.

С HTML5 и CSS3 мы имеем больше шансов для создания резиновых веб-страниц. Использование Media Queries которые поддерживаются всеми новыми браузерами и если мы хотим чтобы IE 6-8 также мог поддерживать Media Queries мы можем добавить js-скрипт respond.js для Drupal(работает только при включенной опции Объединение и сжатие файлов CSS) или загрузить с GitHub для использования с различными CMS respond.js. Медиа-запросы позволяют при помощи простых деклараций CSS в таблице стилей определить, какой размер будет иметь элемент страницы в зависимости с изменением окна браузера, например:

Эта декларация определяет, что при уменьшении экрана браузера менее 600px DIV с ID#art_gallery эквивалентен ширине 100%.

Кроссбраузерность резинового(отзывчивого) веб-дизайна

Позиционирование элементов для Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari

При позиционировании элементов веб-сайта мы можем заметить разницу в 1px в различных браузерах, но так как принято в большинстве случаев для отзывчивого дизайна задавать размер в условных единицах EMs то решением для коректного позиционирования элементов веб-страницы является использование десятых и сотых долей единиц измерения.

Пример 1: значение margin-top: 2.01em; для какого либо элемента веб-страницы будет отображать данный элемент одинаково во всех браузерах, но если задать margin-top: 2em; то в Mozilla Firefox мы увидим что позиционирование отличается от того как будет расположен данный элемент в Internet Explorer, Google Chrome, Opera, Safari

Пример 2: значение line-height: 27.3px; для шрифта кнопок во всех браузерах отображается одинаково, но если задать line-height: 27px; то в Internet Explorer мы увидим незначительную разницу с тем как данное значение срабатывает в Google Chrome, Mozilla Firefox, Opera, Safari


Шрифты для стандартного отображения в различных браузерах

Для всех версий браузера Internet Explorer от компании Microsoft можно использовать следующие шрифты семейства Sans-serif: Calibri, Candara, Corbel, Cambria, Constantia.

Для Mac OS и её предшественников наиболее совместимы Monaco, Geneva, Myriad, Skia, но последняя версия Safari поддерживает практически все шрифты

Для unix/linux могут быть использованны DejaVu Sans, DejaVu Serif, DejaVu Sans Mono, Garuda, но не стоит забывать что все браузеры любой операционной системы поддерживают все стандартные шрифты как: Arial, Verdana, Tahoma и т.д

Оптимальный размер шрифта может быть задан между 93% и 97%

Адаптивная вёрстка

17 августа 2020

В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? — спрашивают наши зрители Екатерина и Константин — как правильно их применять? Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.

Когда мобильного веба не было даже в самых смелых фантазиях, весь интернет был на десктопных компьютерах с небольшими экранами. Оптимизирован для разрешения 1024 на 768 и браузера Internet Explorer 5! — гордо писали тогда на сайтах. Но прошло время, экраны подросли и пришлось к этому как-то подстраиваться. Сначала это были просто резиновые таблицы: колонки по 25%, содержимое 50%, а в отдельной строке colspan=3 и распорка для минимальной ширины. Надеюсь, вы не поняли о чём я сечас говорил.

Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. Высоту в вебе в принципе не принято задавать — обычно она подстраивается под содержимое. Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей, которая усложнила вёрстку, но сделала первый шаг в правильном пути.

Таблицы для раскладки ушли, а резиновая вёрстка осталась. Если у вас эластичные флоаты, флексы… да хоть гриды! — это всё равно резиновая вёрстка. Но если ширина внешнего контейнера зафиксирована — это уже фикс, сколько бы ни было резины внутри. Чуть более универсальный фикс, но всё равно. В общем, главное чтобы сайт двигался так или иначе вместе с окном, а не торчал кирпичом где-то в центре или с краю.

Когда расширился круг устройств с интернетом и появились первые мобильные браузеры — встала задача как-то подстраиваться под них. Простая резина здесь уже не справлялась — нужно было переписывать стили. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. В статье на A List Apart Марк предложил добавлять классы при загрузке или ресайзе окна и на каждый диапазон вешать стили. До первой реализации медиавыражений в Safari оставалось два года.

Мастер Йода рекомендует:  Как на фронтенд-собеседовании превратить сложный вопрос в лёгкий

Когда в начале десятых годов появилось для чего адаптировать и чем адаптировать — мобильные браузеры и медиавыражения — вышли книги, давшие названия подходам: «Адаптивный веб-дизайн» Аарона Густавсона и «Отзывчивый веб-дизайн» Итана Маркота. Подходы Аарона и Итана продолжали идеи Марка, но с более современными технологиями и несколько отличались направлением мысли.

«Адаптивный веб-дизайн» Аарона предлагал гибко адаптировать сайты к возможностям устройств и браузеров. Важной частью этой философии был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки. Хотя Аарон писал не совсем об этом, сегодня принято считать, что главное в адаптивной вёрстке — привязка к конкретным разрешениям и устройствам. Стили переключаются от одного брейкпоинта к другому, то есть у вас есть фиксированные макеты для iPad и iPhone, а то, что между ними вас не волнует.

«Отзывчивый веб-дизайн» Итана ставил во главу три вещи: резиновый макет, гибкие картинки и медиавыражения. Все размеры и отступы Итан предлагал указывать в процентах с сумасшедшими дробями для точности. Отличительной чертой подхода стало плавное изменение сайта, с ориентацией не на конкретные устройства, а на содержимое. То есть ваш резиновый макет хорошо выглядит не только на iPhone и iPad, но и в любой точке между ними.

Чуть позже Итан сформулировал ещё один важный принцип в книге «Сначала мобильные». Если до тех пор отправной точкой для адаптации вёрстки служила десктопная версия, то он предложил перевернуть схему и начинать с мобильной версии, а потом её улучшать. Почему так? Потому, что усложнять простое проще, чем упрощать сложное. Вдуматесь! А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.

Ну как, стало понятно? Вот адаптивная, вот отзывчивая… М-м, нет, не очень. Из-за путаницы между техникой адаптивной раскладки и философией адаптивного веб-дизайна, из-за того, что все эти подходы прекрасно сочетаются и уже не проследить чёткую границу между ними — из-за всего этого, я плюнул на терминологическую чистоту и стал называть всё это адаптивным дизайном или адаптивной вёрсткой. Это понятие всегда было достаточно широким, чтобы вместить все остальные способы.

Да и принцип дискретной адаптации от размеров устройств и без резины имел смысл лет 10 назад. При сегодняшнем разнообразии устройств полагаться на конкретные размеры и жёстко переключаться между ними — значит однажды очень больно промахнуться. Притом, никто вам не мешает при полностью резиновой вёрстке дописывать адаптацию под нужные разрешения.

Ну и как теперь верстать? Просто! Сначала делаете мобильный резиновый макет, который хорошо вписывается в небольшие устройства. А когда размеры экрана или окна начинают расти — начинаете использовать появившееся пространство для улучшения интерфейса. Появляется боковая колонка, вторая, растут размеры картинок и подгружаются новые разрешения и так далее. То есть медиавыражения меняют стили не когда вы дошли до экрана самого модного телефона, а когда это нужно для содержимого сайта и удобства пользователя. Мы именно так и учим делать на интенсиве по продвинутой вёрстке.

Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: вьюпорт, медиавыражения, адаптивные картинки и другое. Сегодня мы сделали первый шаг и разобрались с подходами: он оказывается всего один. Про остальное ещё поговорим!

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

Здравствуйте уважаемые начинающие веб-мастера.

В этой статье рассмотрим, как блочный каркас сайта, созданный нами в предыдущей статье, сделать резиновым.

Сначала о том, что из себя представляет резиновый каркас сайта, и чем он отличается от простого блочного каркаса, и зачем он нужен.

Всё дело в том, что мониторы имеют самые разные размеры, от малюсеньких мобильных, до огромных домашних кинотеатров.


А, допустим, блочный каркас имеет фиксированную ширину в 900 px.

На мобильном мониторе у сайта появится полоса горизонтальной прокрутки, и просмотреть сайт, можно будет только передвигая прокрутку, то есть частями, умещающимися в окне экранчика.

А на мониторе шириной более 2000 px, наши 900, будут смотреться как тонкая полоска. А ведь, обычно, большие экраны устанавливаются, на значительном расстоянии от пользователя.

И в том и в другом случае, просмотр сайта с фиксированной шириной, будет очень неудобен.

Поэтому и нужен так называемый резиновый каркас, чтоб пользователи с экранами любых размеров, могли комфортно просматривать Ваш ресурс.

Давайте подробно рассмотрим, как создать резиновый каркас сайта из блочного каркаса, который мы создали в двух предыдущих статьях.

Для примера возьмём каркас с двумя колонками, расположенными справа и слева от контента.

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

Итак, блочный каркас сайта с двумя боковыми колонками.

Теперь возьмём код этого каркаса, и посмотрим, что в нём нужно изменить. А изменять будем, в основном, единицы измерения в свойстве width .

В этом коде они заданы в пикселях, и ширина блоков, таким образом, является фиксированной. Мы же будем задавать их в процентах.

И проценты эти будут браться от ширины экрана, а так как экраном у нас является тег body , то он, по умолчанию, будет составлять 100%.

Сделав эти изменения, попробуем уменьшить ширину экрана, и посмотрим, что произойдёт с нашим каркасом сайта.

Как видите, все блоки равномерно уменьшились, относительно размера окна браузера. Если это окно увеличить, то все блоки так же пропорционально увеличатся.

Высота блоков не учитывается, так как она зависит от содержания, и на читабельность не влияет.

Однако это утверждение не подходит для изображений. По умолчанию, размер картинок задаётся в пикселях. И, чтобы их размер так же менялся, как и у блоков, соответственно размеру экрана, его нужно задать в процентах, и ширину, и высоту.

Если высоту изображений не задать в процентах, то они, на разных мониторах будут вытягиваться в высоту.

То же самое относится к изображению в шапке сайта, и соответственно, к высоте блока header .

Если же шапка сайта украшена размноженным изображением, или фоновым цветом, то задавать ей высоту не нужно, так как она, по любому, определиться содержанием.

Для слишком маленьких и слишком больших мониторов есть смысл ввести в код ещё два свойства. Это

max-width — максимальная ширина сайта;

min-width — минимальная ширина сайта;

Минимальный размер устанавливается в тех пределах, когда дизайн сайта при уменьшении экрана, начинает катастрофически рушиться.

Чтоб до этого не доходило, и устанавливается min-width для блока wrapper .

max-width выбирается исходя из понятий оптимального восприятия.

Такие ограничения можно вводить для любого блока сайта.


Ещё один момент на который необходимо обратить внимание — это размер текста font-size

Размер текста в браузерах, обычно задаётся по умолчанию и составляет 100%. Но это относиться к тегам P и H1….H6 , то есть к стандартному тексту, и стандартным заголовкам.

Если же Вам потребуется создать текст или заголовок (например в шапке сайта), какого либо нестандартного размера, то font-size ему нужно задавать в процентах от значения по умолчанию.

Я, конечно забегаю немного вперёд, но за то, когда Вы научитесь создавать шапку сайта, и заполнять каркас сайта текстом и изображениями, прочитав следующие за этой, статьи моего блога, то Вам уже будет ясно, как сделать шаблон, равномерно отображающийся в мониторах разных размеров.

Желаю творческих успехов.


— Какую температуру вы предпочитаете на
отдыхе: сорок градусов по Цельсию, или по Фаренгейту?
— По Менделееву!

12 комментариев на «Резиновый сайт»

Вот в этом я к сожалению не волоку.

На этот вопрос ответит скорее всего только техподдержка хостинга. У них есть такой показатель как CP — величина, характеризующая время, затраченное центральным процессором на выполнение процессов пользователя (например, обработку http-запросов web-сервером, выполнение php-скриптов, выполнение задач через crontab), другими словами допустимая нагрузка.

В зависимости от неё хост предоставляет тариф. Когда нагрузка превышает допустимую, хостер предлагает перевести аккаунт на более дорогой тариф. Вот всё что я знаю.

Спасибо! Вы мне очень помогли в создании небольшого сайта.
Я хотел задать вопрос, правда не по теме. Сколько клиентов способен выдержать сайт на чистом html?
Дело в том, что я жадный))) и не хочу платить за хостинг, поэтому выбираю бесплатный.
Тот, который я выбрал имеет ограничение по трафику 5 Гб/мес. Скорость почему-то 250 мбит/с, наверное для всего хостинга.
Мне интересно сколько клиентов выдержит такой сайт
1. Чистый html.
2. Все картинки, используемые сайтом, находятся на pixabay как thumbs.
3. Средний размер страницы 60 кб.
4. Используемое ОЗУ: 70 мегабайт максимум (условия хостинга но не бегет правда а другого)
5. Процессор неизвестно. Около 100 мгц. Судя по озу.
6. Количество страниц сайта 10 максимум.
7. Максимальный размер сайта 1 мегабайт.
Мне нужно хотя бы 1000 клиентов в минуту. Чтобы не падал.

Здравствуйте Евгений.
1. table я использую строго по назначению, т.е. для создание таблиц, а табличная вёрстка, которую я показал — это старинный и простейший вариант из тех времён, когда небыло ни планшетов ни смартфонов, и ни о какой адаптации слыхом не слыхивали. А свойства css flex, inline-block применяются в тех случаях, когда они более уместны. Нет такого, что лучше, а что хуже. Всё зависит от задачи, а уж как её лучше реализовать — это сугубо индивидуально для каждого случая.

Мастер Йода рекомендует:  Как сделать масштабный проект в IT-сфере

2. Без @media screen обойтись нельзя, так как экранов разных размеров много, и для каждого диапазона нужно подбирать позиционирование форму и размер элементов, а так-же размеры шрифтов. Сайдбары до возможной читабельности сохраняются на своём месте, а потом переносятся в конец статьи. Для вызова инфы из них, можно сделать меню вверху страницы, которое появляется тогда, когда сайдбар уходит вниз. Зачастую, для мобильных размеров, вверх страницы выводится несколько меню — меню страниц, меню рубрик, меню записей, меню блоков сайдбара. Можно, для экономии места одно раскрывающееся меню, в несколько уровней, в котором будут последовательно открываться все эти меню со своими пунктами во втором уровне. Всё зависит от важности того что вы хотите показать. Короче поле для творчества.

Этот сайт у меня толком не адаптирован, так как посещений с мобил почти нет, но вот пример другого https://sekretymastera.ru, в котором мне кажется удалось неплохое меню сайдбара в самом верху страницы. Появляется при экране 700 пикселей. Сайт ещё в стадии создания, поэтому в меню много свободного места.

Доброго времени суток! Помогите спасите! уже давно увлекся созданием сайтов и понял что это идеальная для меня работа и вам за это отдельное спасибо! Но я не могу никак найти ответы на вопросы который как по мне одни из самых важных:
1) Я часто замечал что при верстке сайта вы используете тег table. Скажите, при верстке адаптивного сайта что является лучшим инструментом: flex, inline-block или как у вас table? и из этого вытекает следующий вопрос:
2) при верстке адаптивного сайта, можно ли совсем обойтись без @media: например если у меня два sidebar или пусть даже один в мобильной версии он/они смотрится ужасно(текст маленький, нечитабельный). Можно ли и (и собственно куда) убирать сайдбары при разрешении в котором они становятся нечитабельны и некрасивы?
Заранее огромное спасибо!

Пожалуйста не путайте мобильную версию сайта и адаптивный дизайн. Это разные вещи. У моих сайтов нет мобильной версии, только адаптивный дизайн, и о нём я подробно рассказал в разделе Адаптивный дизайн. А фрилансом я не занимаюсь. Веду блог и делюсь информацией просто для души, хобби так сказать. И это увлечение не единственное и не основное, так что извините.
Но, если Вы возьмётесь за адаптивный дизайн самостоятельно (он гораздо лучше мобильной версии), то я всегда помогу советом, и разъясню непонятки.

Здравствуйте!
Статья очень понравилась, хотелось бы поинтересоваться, сколько будет стоить заказать у вас мобильную версию сайта?

Большое спасибо, долгое время не мог найти толковый ответ на этот вопрос. Хороший ресурс)

полезная статья. понравилось

Я то этим не озадачивался, но могу дать Вам классную наколку. Есть такая соц. сеть «Страна Пенсионерия». К сожалению ссылка не сохранилась. Я когда-то в ней активно участвовал под ником Мастер. Там есть модератор Леди Ди, большая специалистка по самописным сайтам. Как-то я задавал ей такой же вопрос, и она сказала, что есть маленький скрипт для этого.

Найдите в Гугле эту сеть, она живая, и обратитесь к Леди Ди. Можно передать привет от меня. Должна помочь. Хороший человек.

Очень интересно! У меня сайт статистический на HTML4.Страниц не мало. И возникает вопрос: 1.Возможно ли дизайн моего сайта сделать резиновым?
2. Изменения на всех страницах делать вручную?
Спасибо
С уважением
Владимир

Конечно можно. Правда он больше информативный, чем дизайнерский, и в нём еще всего 9 страниц. Времени не хватает — строимся, но пишу помаленьку.
Милости прошу — http://sekretymastera.ru/nowosti/stenyi-iz-keramzita/. Кстати он резиновый, правда ещё не совсем доведённый, потому что я его уже начал переделывать на адаптивный.
Спасибо за отзыв!
В строке «Сайт», в комментариях, укажите Ваш сайт. Будет время загляну.

Доброго время суток. Безумно понравился ваш сайт. Все понятно и доступно. Супер!Огромный респект! Спасибо вам огромное. Очень интересно посмотреть на ваши другие сайты. Читала, что у вас есть сайт про строительство, но никак не могу найти адресс. Очень уж хочется посмотреть.:)Если можно, конечно.

Фиксированный, резиновый или адаптивный?

Недавно начал осваивать HTML и CSS. И почти сразу возник вопрос: какой дизайн перспективнее? Сверстал несколько средненьких по сложности фиксированных один резиновый с горем пополам… и один простенький адаптивный… на сколько я понял сейчас самый перспективный это адаптивный? Или это не так? Я так и не понял как в случае адаптивного дизайна поставить изображение как background? объясните кто знает. Оно должно быть векторным или нет?


Получилось сразу несколько вопросов в одном, но создавать для каждого отдельную тему смысла нет.

  • Вопрос задан более трёх лет назад
  • 14886 просмотров

Самый перспективный дизайн это тот, который Вы лучше знаете. В идеале лучше знать всё.

Дело в том, что направлений проектов много и для каждого какой-то дизайн лучше, какой-то хуже.

Всегда будут сайты где настолько мало контента (о целесообразности не будем говорить), что их «резинить» просто нет ни малейшего смысла. Так, что даже статическая верстка ещё долго будет жива. Например, сайты визитки различных ООО «Вектор+» с 5-ю страничками.

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

Вообще, по «эволюции» веб-дизайна всё шло так: фиксированый>резиновый>адаптивный.

Фиксированый хорош, если ширина страницы предполагается небольшой, а просмотр на мобильных устройствах не нужен

Резиновый подстраивается под размер монитора, однако, для работы на мобильных устройствах не годится.

Адаптивный впишется во всё: планшет, смартфон, нетбук и т. д.

__
Вывод: всё зависит от Ваших целей, умений и навыков.

Я так понял, что два ярких различия между фиксированным и адаптивным таковы:
1) Шрифт указывается в em.
2) Размеры элементов указываются в процентах.
Это для того, чтобы высчитывать элементы исходя из размера экрана.

А что насчет резинового сайта? В чем различия между резиновым и адаптивным?

И советую посмотреть это:
liquidapsive.com здесь представлены фиксированный, резиновый, адаптивный и отзывчивый дизайн

Вот неплохая статья о различиях между макетами «Адаптивно-отзывчивый: разбираемся в терминологии». Но, я считаю, классификация условная.

Какая техника наиболее перспективна — вопрос не совсем корректный.. Тут всё зависит от конкретного проекта — где можно применить адаптивный дизайн, а где-то лучше сделать мобильную версию.

Прежде всего необходимо понимать различия между данным подходами, как с точки зрения дизайна, так и с точки зрения верстки. Если вы понимаете, как правильно строить сетку и использовать относительные единицы измерения, то никаких проблем с резиной, отзывчивостью и т.д. не должно возникнуть. Всё это довольно просто.

Трехколоночные фиксированные макеты

Трехколоночные фиксированные макеты обычно используются в тех случаях, когда двух колонок для сайта недостаточно, чтобы разместить на его страницах всю информацию необходимую пользователям сайта. При этом автору требуется сделать содержимое сайта определенной ширины, подобранной таким образом, чтобы его страницы можно было комфортно просматривать при большинстве популярных разрешений мониторов. Сегодня указывать ширину HTML-страниц для разрешений меньше 1024px не имеет смысла, если только вы не ориентируетесь на экраны устройств типа смартфонов, телефонов и т.д. Но в этом случае лучшим вариантом будет создание отдельной таблицы стилей для разных типов устройств и подключение ее, например, с помощью HTML-тега .

При верстке макетов всегда помните о том, что при добавлении каким-то HTML-элементам внешних полей (CSS margin), внутренних отступов (CSS padding) или рамок (CSS border) их размеры будут увеличены. То есть они станут больше ширины и высоты, указанных в свойствах CSS width и height. Если не учесть этот момент, то весь макет может «поехать» или произойдет наложение некоторых элементов друг на друга. Чтобы этого не случилось необходимо скорректировать ширину и высоту с учетом значений всех свойств CSS.

Три колонки фиксированные

Пример HTML и CSS: верстка макета с тремя фиксированными колонками

Описание макета

  1. Чтобы макет был определенной ширины, все его элементы были заключены в оберточный блок > «wrapper» со значением ширины в 1000px. Взято именно такое значение, а не 1024px так как не стоит забывать о полосе прокрутки, которое появится когда высота страницы будет превышать высоту окна браузера. Некоторые верстальщики предпочитают указывать еще меньшее значение, например 990px.
  2. Для расположения макета по центру страницы у оберточного блока узазали свойство margin:0 auto.
  3. К колонкам меню и сайдбар было применено свойство CSS float со значениями left и right, чтобы эти блоки всплыли к краям страницы, а колонка с контентом поднялась на их уровень.
  4. Колонке с контентом были добавлены боковые поля с помощью свойства CSS margin, чтобы она не заходила под всплывшие боковые колонки.
  5. Чтобы предотвратить всплывание футера, если окажется так, что какая-то из колонок будет короче других, к нему было применено свойство clear прерывающее обтекание.

Три фиксированные колонки с контентом впереди

Пример HTML и CSS: верстка макета с тремя фиксированными колонками и контентом впереди

Добавить комментарий