Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
1

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

11.02.2017, 18:22. Просмотров 281. Ответов 14
Метки нет (Все метки)

Всем добрый вечер!

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

Вот пример : в html прописываю
HTML5
1
<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-height: 568px)and (orientation: landscape)" href="mystyle3.css"/>

В css : /* iPhone 5 ----------- */
CSS
1
2
3
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) 
 
#footer{background:#e5e5b7; margin:0px;position: relative; /*Для выравнивания высот колонок*/
Медиазапрос написала перед футером.

Результат проверяю на http://www.responsinator.com

Вопрос первый : после медиазапроса в css на следующей строке, где футер, показывают ошибку. Значит я что-то не так написала в медиазапросе. Вроде все на месте. Что не так?

Вопрос второй : или из-за этого, или из-за чего-то другого ничего не меняется, когда проверяю, как смотрится на моб.устройстве.
Предполагаю, что, может надо прописать в процентах ширину, как в данном примере, взятом из интернета? Или написать, что правая колонка будет под левой надо, а все остальное место займет content?
CSS
1
2
3
4
5
6
7
8
9
10
@media screen and (min-width: 200px) and (max-width: 480px) {
#content {
width: 80%;
float: none;
}
#sidebar {
width: 20%;
float: none;
}
}
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.02.2017, 18:22
Ответы с готовыми решениями:

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

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

Адаптивная верстка
Здравствуйте Уважаемые форумчане! Прошу оценить адаптивную верстку.

Адаптивная верстка
Уважаемые форумчане! Пожалуйста, помогите человеку, впервые пытающемуся сделать адаптивный сайт....

Адаптивная верстка
Ребят, подскажите, как сделать адаптивной картинку в background? Делать несколько картинок под...

14
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2887 / 2451 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
11.02.2017, 19:01 2
Цитата Сообщение от енот71 Посмотреть сообщение
Результат проверяю на http://www.responsinator.com
Далеко не лучший сервис для проверки адаптивной вёрстки... Безбожно врёт... Если есть возможность проверяйте вёрстку с мобильных устройств...
0
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
11.02.2017, 19:22  [ТС] 3
Возможности такой нет.
Я всегда смотрела в googl-аналитик, потом на других сервисах - везде одно и то же - не адаптирован под моб.устройства. Все вместе не могут врать Но я по наивности своей думала, что <meta name="viewport" content="width=device-width, initial-scale=1"/> достаточно
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2887 / 2451 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
11.02.2017, 19:26 4
Цитата Сообщение от енот71 Посмотреть сообщение
я по наивности своей думала, что <meta name="viewport" content="width=device-width, initial-scale=1"/> достаточно
Поверьте Вы не одна... Уже можно целую паству собрать... Было бы замечательно, если бы Вы выложили на сервер свои труды, чтобы мы могли посмотреть, как дела обстоять... По обрывкам кода, которые Вы привели сложно сказать, что и почему не работает...
0
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
11.02.2017, 19:31  [ТС] 5
Что нужно? Адрес сайта? Или что-то еще? Я не спец
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2887 / 2451 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
11.02.2017, 19:49 6
Цитата Сообщение от енот71 Посмотреть сообщение
Адрес сайта?
Угу... И по подробнее опишите, какой элемент, какой стиль где не применяется, чтобы долго не искать...
0
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
11.02.2017, 19:54  [ТС] 7
http://pozdravlyay.com/

А вот про элемент и стиль не поняла.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2887 / 2451 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
11.02.2017, 20:07 8
енот71, пока вижу ошибку в стилях... Фигурных скобок нет...
CSS
1
2
3
4
5
@media only screen and (min-width: 320px) and (max-height: 568px){
 
#footer{background:#e5e5b7; margin:0px;position: relative; /*Для выравнивания высот колонок*/
 
}
А по сути Вы в начале пути... Будете писать медиазапросы, проверяйте лучше не отходя от кассы в броузере, кнопка F12(заходим в инструменты разработчика) и жамкаем иконку с мобильными устройствами...

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


На мобильнике всё-также, как и на скрине, то есть пока не очень...
0
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
11.02.2017, 20:15  [ТС] 9
Не поняла, где они должны быть.

Добавлено через 1 минуту
Если я ставлю, как у Вас 568px){ , то ошибка перемещается вниз, на самую последнюю строчку.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2887 / 2451 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
11.02.2017, 20:17 10
енот71, матчасть...
0
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
11.02.2017, 20:19  [ТС] 11
Читала уже,именно на этом сайте, ничего мне не дало, поэтому сюда и пришла
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2887 / 2451 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
11.02.2017, 20:33 12
Цитата Сообщение от енот71 Посмотреть сообщение
Читала уже,именно на этом сайте, ничего мне не дало, поэтому сюда и пришла
Знать бы ещё, чем Вам можно помочь в данной ситуации... Дело в том, что к нам обычно приходят люди у которых не получается, что-то конкретно реализовать... У Вас в принципе надо адаптировать весь сайт целиком... Я конечно могу накидать небольшой пример, как использовать медиазапросы, если Вам это поможет... У Вас сайт трёхколоночный, поэтому на мобильных устройствах лучшим вариантом будет расположить одну колонку под другую, чтобы получился лонгрид или просто убрать левую и правую часть...
0
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
11.02.2017, 20:53  [ТС] 13
Да, как расположить одну колонку под другой? Менять структуру сайта у меня ума не хватит. Я с этим-то промучилась бог знает сколько! Делала не по шаблону - из головы... Читала в интернете и делала.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2887 / 2451 / 1050
Регистрация: 15.12.2012
Сообщений: 9,088
Записей в блоге: 7
11.02.2017, 21:06 14
енот71, вот примерчик:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body{width: 100%; height: 100%; margin: 0}
        .wrapper{width: 100%; height: 100%}
        .left, .right, .content{float:left}
        .left, .right{width: 20%; height: 100%; background: red}
        .content{
            width:60%;
            height: 100%;
            background: blue
        }
        @media screen and (max-width: 768px){
            .left, .right, .content{
                float:none;
                width:100%
            }
            .left, .right{
                background: green;
            }
            .content{
                background: red
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
</body>
</html>
Ужмите окно броузера и посмотрите, что произойдёт при ширине окна меньше 768px...
0
енот71
0 / 0 / 0
Регистрация: 15.08.2016
Сообщений: 22
11.02.2017, 21:12  [ТС] 15
Спасибо, сейчас буду разбираться.
0
11.02.2017, 21:12
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.02.2017, 21:12

Адаптивная верстка
Доброго времени суток всем! Столкнулся с такой проблемой, создал некий калькулятор на своем сайте,...

Адаптивная верстка
У меня есть psd в котором контент фиксирован под 960px(ноутбуки). Вопрос такой надо ли делать...

Адаптивная верстка
Всем привет! Учусь верстать сайты на HTML+CSS без фреймворков, js и т.д., но получается пока не...


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

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

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