Резиновая (адаптивная) верстка сайта на css

@Вова101 · Регистрация: 19.07.2014

Студворк — интернет-сервис помощи студентам

Доброе время суток!, в этом разделе я хочу поделиться с вами тем что я знаю о резиновой (адаптивной) верстке сайта.

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

Каким образом она создается?
Существует много разных способов для осуществления адаптивной верстки. Лично я знаю только 2:

C помощью использования функции media screen;
Задавая блокам ширину в процентах.
Я также слышал о способе с использованием Bootstrap, но как - не знаю.

А сейчас я о них вам подробно расскажу.

CSS функция @media screen
@media screen, также называемая media queries - лично я использую именно этот вариант, в моём мнении, он является самым лучшим и простым. А являет он собой вот этот код:

CSS
1
@media screen and (max-width: AAApx) { }

Точнее, это только 1 условие, самое популярное, а в общем существует их 4, но об этом позже, а сейчас давайте разберем куда этот код вставлять и как ним пользоваться.

@media screen and (max-width: AAApx) { } - внутри фигурных скобок будет такой же код как и во всех обычных файлах css (но с некоторыми изменениями):

Во первых, если вы хотите чтобы какой-то блок исчез когда экран становится менее допустим 400px, то надо сбивать стили того блока внутри @media screen, а для этого есть три способа:

Прописать тому блоку display: none; (простой но не лучший вариант, бывают проблемы);
Прописывать каждому блоку в том же блоке и всем функциям по 0 или none (что получается, извиняюсь за выражение, тупо, долго и все равно что display: none);
А лучше всего, прописать блоку position: absolute; и left: -4000px; (чтобы убрать блок за экран), и таким способом он вооообще никак не сможет помешать дизайну вашего сайта.

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
@media screen and (max-width: 400px) {
    #block{
        position: absolute;
        left: -4000px;
     }
}

Во вторых, если вам нужно какой-то блок поменять, то вы копируете его стили из изначального кода css опять таки внутрь @media screen и изменяете его стили:

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
    #block{
        background-color: white;
     }
@media screen and (max-width: 400px) {
    #block{
        background-color: blue;     /*тоесть, если ширина экрана устройства будет равна или менее 400px, то фоновый цвет блока будет синим*/
     }
}

В третьих, самый важный момент! - если вам нужно добавить блок, то вам нужно будет его добавить в обычный html код. А в изначальном CSS коде, вам его нужно будет сбить, так как я уже раньше упомянул, с помощью позиционирования его за экран или display: none. А уже в @media screen вы задаете ему стили и, обязательно, не забудьте поместить его обратно на экран =)

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
Начну с боди
    <body>
            <div id="header">
            </div>
            <div id="footer">
            </div>
    </body>

При ширине экрана равной или менее 400px, у меня появится подвал(просто пример)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    #header{
        height: 50px;
        width: 100%;
        background-color: blue;
     }
    #footer{
        height: 50px;
        width: 100%;
        background-color: red;
        position: relative;
        bottom: 0;
        display: none;
     }
@media screen and (max-width: 400px) {
    #footer{
        height: 50px;
        width: 100%;
        background-color: blue;
        position: relative;
        bottom: 0;
        display: block; /*В этом случае я использовал display: none и block; по скольку ширина подвала у нас 100%*/
     }
}

Так, мы разобрались как работает media screen (media queries). А теперь можно и разобрать все остальные детали. Давайте начнем с условий:

CSS
1
2
3
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }

эти условия делают такие же чудеса как и первое, но вот разница:

@media screen and (min-width: XXXpx) { } - это условие позволяет задавать стили для экранов больше или равным к заданной вами ширине(противоположное max-width).
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { } - это условие позволяет вам задавать стили для экранов как я называю их "от и до" =) ширины заданной вами. Тоесть, вы задаете минимальную и максимальную ширину экрана.
@media screen and (max-device-width: XXXpx) { } - его я не совсем понимаю как использовать, если знаете, пожалуйста поделитесь.

И последнее о media queries: ее также можно задать с помощью html, тоесть внутри <head></head> вы можете подключить стили media screen css также как и любой другой css файл. Вот пример:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - Для корректной работы стилей
    <link href="css/style1.css" type="text/css" rel="stylesheet" media="screen and (min-width: 400px)">
    <link href="css/style2.css" type="text/css" rel="stylesheet" media="screen and (max-width: 399px)">
    <title>Тестовая страница</title>
</head>

тоесть это означает что если ширина экрана будет больше или равна 400px, то подключить стили1 css, а если менее 400px то подключить стили2 css. А, и кстати, все IE до 8 включительно не поддерживают media queries. Это можно исправить с помощью JQuery, но это уже тема раздела по JQuery.

Ширина блоков в процентах
И несколько слов о ширине в процентах. Ширину в процентах не советую использовать во время создания адаптивной верстки, почему? Потому что если кто-то зайдет на ваш сайт допустим с очень маленького устройства посмотреть вашу галерею у которой ширина будет допустим 80% от ширины экрана, то они ваших фотографий даже не увидят, так как ваши фото могут быть в одном ряду и все они сожмутся до очень маленьких размеров, а с помощью media queries, вы можете поставить их в горизонтальное положение а не вертикальное, чтобы их размеры были больше. А если кто-то зайдет с очень большого экрана то ваши фото могут растянуться до очень больших размеров и в итоге будут выглядеть не качественно. А также, чтобы вы знали, когда вы задаете ширину в процентах, то эти проценты, это проценты ширины по их родительскому блоку.

Вот, вроде бы и все, если кто может еще чем-то поделится из своих знаний и опыта по созданию адаптивной верстки, пожалуйста, делитесь =)

Резиновая (адаптивная) верстка сайта на css

@vovandr · 27.07.2014, 10:23

Во первых, если вы хотите чтобы какой-то блок исчез когда экран становится менее допустим 400px, то надо сбивать стили того блока внутри @media screen, а для этого есть три способа:
Прописать тому блоку display: none; (простой но не лучший вариант, бывают проблемы);
Прописывать каждому блоку в том же блоке и всем функциям по 0 или none (что получается, извиняюсь за выражение, тупо, долго и все равно что display: none);
А лучше всего, прописать блоку position: absolute; и left: -4000px; (чтобы убрать блок за экран), и таким способом он вооообще никак не сможет помешать дизайну вашего сайта.

Скажите а какие проблемы могут быть с display: none?

@Вова101 · 27.07.2014, 10:40 **[ТС]**

Один раз, я так прописал моей меню и текст остался на месте а остальное пропало... но может я чтото не правильно прописал, но потом еще много читал о резинке и один программист тоже говорил что лучше убирать за экран чем display: none (и я посчитал что может это и была проблема о которой он говорил). Если, конечно же, у него ширина не 100%... хотя, может даже и 100% убирается, не пробовал...

@vovandr · 27.07.2014, 10:44

Ну программист только такой бред и может сказать) практикующий верстальщик отправил бы вас искать ошибку...

@BarbosLV · 27.07.2014, 10:46

vovandr Зачем эти не уместные вопросы? Не видишь человек опытом делится, знания свои выплёскивает. Ему еще и вечером писать, а ты только зря отвлекаешь...

@vovandr · 27.07.2014, 10:48

Ну я зашел почитать просто

и подумал что может что-то новое узнаю и вот вопросик возник

более не отвлекаю...если что пардон

@Вова101 · 27.07.2014, 10:56 **[ТС]**

Нет, на самом деле я у него ничего не спрашивал, просто статью его читал и там он написал "этот вариант лучше чем display: none" вот и все. И спорить я ни с кем не буду... и в конце статьи хотел добавить "поделитесь и вы своими знаниями и опытом" =)

@Dribentsov · 21.12.2015, 20:20

может поможет
пример создание адаптивной страницы сайта
https://www.youtube.com/watch?v=o1RcFM8JoVs

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	27.07.2014, 10:40 [ТС]
	Один раз, я так прописал моей меню и текст остался на месте а остальное пропало... но может я чтото не правильно прописал, но потом еще много читал о резинке и один программист тоже говорил что лучше убирать за экран чем display: none (и я посчитал что может это и была проблема о которой он говорил). Если, конечно же, у него ширина не 100%... хотя, может даже и 100% убирается, не пробовал... 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	27.07.2014, 10:44
	Ну программист только такой бред и может сказать) практикующий верстальщик отправил бы вас искать ошибку... 0

@BarbosLV 368 / 406 / 165 Регистрация: 29.05.2014 Сообщений: 1,494
	27.07.2014, 10:46
	vovandr Зачем эти не уместные вопросы? Не видишь человек опытом делится, знания свои выплёскивает. Ему еще и вечером писать, а ты только зря отвлекаешь... 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	27.07.2014, 10:48
	Ну я зашел почитать просто и подумал что может что-то новое узнаю и вот вопросик возник более не отвлекаю...если что пардон 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	27.07.2014, 10:56 [ТС]
	Нет, на самом деле я у него ничего не спрашивал, просто статью его читал и там он написал "этот вариант лучше чем display: none" вот и все. И спорить я ни с кем не буду... и в конце статьи хотел добавить "поделитесь и вы своими знаниями и опытом" =) 0

@Dribentsov 0 / 0 / 0 Регистрация: 08.12.2015 Сообщений: 4
	21.12.2015, 20:20
	может поможет пример создание адаптивной страницы сайта https://www.youtube.com/watch?v=o1RcFM8JoVs 0