Какой лучше выбрать тип вёрстки?

Question

[vladimirir]

Поучил по самоучителям HTML и CSS, решил сверстать какой-нибудь простенький сайт (по типу этого englishinn.ru). И абсолютно запутался в том, какие типы вёрстки бывают, какая что из себя представляет и какую в идеале выбрать. Попытки обратиться к гуглу и ютубу только больше запутывают ситуацию, поскольку понятия о тех же адаптивной и отзывчивой вёрстках максимально размыты. То они одно и то же, то отзывчивая есть тип адаптивной, то вообще совсем другая. Я так понял, что изначально была фиксированная и, что при ней на малых экранах возникает горизонтальная полоса прокрутки. Понял, что в резиновой все элементы растягиваются пропорционально размерам экрана. Понял, что при адаптивной часто используется Boostrap с сеткой, благодаря которым тот же сайдбар (как в вышеприведённом примере) уедет под контент. Ничего так толком и не понял касаемо отзывчивой.

И мне просто хотелось бы сделать так, чтобы сайт был как бы статичен, чтобы и на малом экране всё выглядело, как на большом, просто всё пропорционально уменьшалось, а блок, вмещающий контент и сайдбар просто растягивался по длине экрана (в смысле чтоб при большом длинном экране между нижней границей блока с контентом или сайдбара (смотря, что длиннее будет) и верхней границей футера была просто пустота). И чтоб ничего при этом не расплывалось (в частности шрифты) при приближении или удалении. Какую для этого лучше выбрать вёрстку?

Comments

[Ankhena]

Вот это прекрасное видео посмотрите целиком, это не долго, 6 минуток.

Не так важно какой вариант или комбо вы выберете. Главное, чтобы на всех размерах экранов сайт хорошо выглядел.

[vladimirir]

Спасибо)

Answer 1

[archelon]

Эти понятия близки, и поэтому их нередко объединяют — имеют в виду адаптивный, когда говорят об отзывчивом, или наоборот. Но разница есть.
Отзывчивый — верстка «отзывается» на изменения ширины экрана в определенных точках.
Грубо говоря, на экране шириной, например, до 560 px применяются одни стили, от 561 до 980 — другие, и т.д. Делается это через медиа-запросы. И основной единицей измерения вполне может быть только px, безо всяких em, rem, vw, vh и т.д.
Можно сказать, что тут у нас как бы несколько вариантов макета под разные разрешения.
Адаптивный = отзывчивый + резиновый, т.е. верстка отзывается в определенных точках, применяются специфические правила, но внутри этих медиа-запросов мы учитываем, что контент может (должен) тянуться.

Хорошее объяснение с гифками:
https://css-tricks.com/the-difference-between-resp...

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

Если хотите статичную верстку, ориентируйтесь на минимально приемлемое разрешение экрана
в head пропишите: <meta name="viewport" content="width=1240">
Тогда на мобильных устройствах сайт будет масштабироваться.

Comments

[vladimirir]

Спасибо) Всё хорошо, единственное, что - с этой строчкой () на очень вытянутых экранах появляется горизонтальная полоса прокрутки. Ну, это, наверное, не так страшно.

[archelon]

vladimirir, насколько маленькие десктопные экраны вы хотите поддерживать?
меньше 1280 сейчас встречается достаточно редко, но если надо, то, например
<meta name="viewport" content="width=1024">
и, конечно, сверстать надо так, чтобы помещалось в эти 1024px.
Но лучше, разумеется, верстать адаптивно.

[vladimirir]

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

[archelon]

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

конечно, можно.
см. viewport units
vw, vh — привязка размеров к ширине и высоте окна (вьюпорта).
https://medium.com/@stasonmars/viewport-%D0%B5%D0%...
но для начинающего пока, наверное, рановато.
сверстайте для начала простую десктопную версию .

[vladimirir]

спасибо) ну, пока такое получилось https://uchimenglish.000webhostapp.com

Answer 2

[approximate solution]

какие типы вёрстки бывают

Их бывают 2 типа - отвратительная верстка за которую охото посадить на кол, и хорошая верстка, которую приятно потом дополнять, если сделано всё модульно, ну или хотя бы без говнокода.

Какую для этого лучше выбрать вёрстку?

в 90% случаев вам хватит адаптивной верстки с использованием медиа-запросов, так как вы новичок, не пытайтесь изобретать велосипед, и схватить излишек знаний.
https://tproger.ru/translations/responsive-web-des...

Comments

[vladimirir]

спасибо)