Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/20: Рейтинг темы: голосов - 20, средняя оценка - 4.60
Вова101
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
#1

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

27.07.2014, 10:14. Просмотров 3556. Ответов 7
Метки нет (Все метки)

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

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

Каким образом она создается?
Существует много разных способов для осуществления адаптивной верстки. Лично я знаю только 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, а для этого есть три способа:
  1. Прописать тому блоку display: none; (простой но не лучший вариант, бывают проблемы);
  2. Прописывать каждому блоку в том же блоке и всем функциям по 0 или none (что получается, извиняюсь за выражение, тупо, долго и все равно что display: none);
  3. А лучше всего, прописать блоку 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
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.07.2014, 10:14
Ответы с готовыми решениями:

Резиновая или Отзывчивая/Адаптивная верстка?
Решил добавить к себе в портфолио &quot;резиновую верстку&quot;, начинаю делать и...

Адаптивная верстка CSS
Здравствуйте, у меня такая проблема. делаю адаптивную верстку для страницы. В...

Резиновая верстка сайта
Сделал сайт для ПК, теперь пробую адаптировать его и под мобильники. Получилось...

Адаптивная верстка сайта
Всем добрый вечер! Есть трехколоночный сайт. Давно назревала необходимость в...

Адаптивная верстка сайта
Ребят помогите я делаю вёрстку сайта, мне нужно сделать адаптивность шаблона. ...

7
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
27.07.2014, 10:23 #2
Во первых, если вы хотите чтобы какой-то блок исчез когда экран становится менее допустим 400px, то надо сбивать стили того блока внутри @media screen, а для этого есть три способа:
Прописать тому блоку display: none; (простой но не лучший вариант, бывают проблемы);
Прописывать каждому блоку в том же блоке и всем функциям по 0 или none (что получается, извиняюсь за выражение, тупо, долго и все равно что display: none);
А лучше всего, прописать блоку position: absolute; и left: -4000px; (чтобы убрать блок за экран), и таким способом он вооообще никак не сможет помешать дизайну вашего сайта.
Скажите а какие проблемы могут быть с display: none?
0
Вова101
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
27.07.2014, 10:40  [ТС] #3
Один раз, я так прописал моей меню и текст остался на месте а остальное пропало... но может я чтото не правильно прописал, но потом еще много читал о резинке и один программист тоже говорил что лучше убирать за экран чем display: none (и я посчитал что может это и была проблема о которой он говорил). Если, конечно же, у него ширина не 100%... хотя, может даже и 100% убирается, не пробовал...
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
27.07.2014, 10:44 #4
Ну программист только такой бред и может сказать) практикующий верстальщик отправил бы вас искать ошибку...
0
BarbosLV
363 / 401 / 165
Регистрация: 29.05.2014
Сообщений: 1,494
27.07.2014, 10:46 #5
vovandr Зачем эти не уместные вопросы? Не видишь человек опытом делится, знания свои выплёскивает. Ему еще и вечером писать, а ты только зря отвлекаешь...
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
27.07.2014, 10:48 #6
Ну я зашел почитать просто и подумал что может что-то новое узнаю и вот вопросик возник более не отвлекаю...если что пардон
0
Вова101
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
27.07.2014, 10:56  [ТС] #7
Нет, на самом деле я у него ничего не спрашивал, просто статью его читал и там он написал "этот вариант лучше чем display: none" вот и все. И спорить я ни с кем не буду... и в конце статьи хотел добавить "поделитесь и вы своими знаниями и опытом" =)
0
Dribentsov
0 / 0 / 0
Регистрация: 08.12.2015
Сообщений: 4
21.12.2015, 20:20 #8
может поможет
пример создание адаптивной страницы сайта
https://www.youtube.com/watch?v=o1RcFM8JoVs
0
21.12.2015, 20:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.12.2015, 20:20

Html css div верстка сайта
Форумчане привет , я новичек , начинаю потихоньку вникать как верстать , есть...

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

Резиновая верстка
Допустим есть блок: &lt;div class=&quot;content&quot;&gt; &lt;div&gt; И стиль: .content {...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru