Страница 2 из 3«123»
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Адаптивная верстка для стандартных экранов
Адаптивная верстка для стандартных экранов
workman
Дата: Среда, 25.10.2017, 00:39 | Сообщение # 16
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата Kosten ()
что то не понял, нужно поменять?

Я уже написал быстрее полный вид пока ты там что-то смотрел у себя ))
Страна: (RU)
Kosten
Дата: Среда, 25.10.2017, 00:42 | Сообщение # 17
Администраторы
Сообщений:15806
Награды: 51


workman, по другому сделал, можешь посмотреть?
Страна: (RU)
Kosten
Дата: Среда, 25.10.2017, 00:43 | Сообщение # 18
Администраторы
Сообщений:15806
Награды: 51


workman, если написал, скинь. 11a
Страна: (RU)
waak
Дата: Среда, 25.10.2017, 00:56 | Сообщение # 19
Vip
Сообщений:332
Награды: 11


Тут начало темы не так написано просто по этому есть вопросы у людей
так как человек написал сразу медиа запросы а не как они работают

первое возьмём блок к примеру с классом .block и зададим ему простые стили ширину и высоту а также фон и отступы в блоке сделаем

стили выглядят так

Код
.block  {
    background: #000;
    width: 250px;
    height: 300px;
    padding: 20px;
}


теперь нам нужно к примеру поменять всё значения при определённом размере экрана так
для этого на нужен медиа запрос в котором мы и изменим параметры

пример медиа запроса
Код

@media screen   and (max-width: 340px) { тут стили для размера экрана 340 и меньше }


пример изменим фон высоту ширину отступы то есть все параметры

Код
@media screen and (max-width: 340px) {
.block  {
    background: #FFF;
    width: 100%;
    height: auto;
    padding: 0px;
}
}


в данном примере мы убрали чёрный фон и сделали его белым затем изменили ширину на 100% тем самым сделали её по размеру экрана так же сделали высоту авто так как блок должен растягиваться по контенту что в нём ну и убрали отступы всё это не обязательно каждый параметр можно изменять отдельно или не трогать вообще


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545


Сообщение отредактировал
waak - Среда, 25.10.2017, 01:01
Страна: (RU)
Kosten
Дата: Среда, 25.10.2017, 05:08 | Сообщение # 20
Администраторы
Сообщений:15806
Награды: 51


waak, привет, а как делать, так чтоб кнопка шире становилась, при сужение, если помнишь, то недавно по вид материалу выставлял, помогал недавно.
Страна: (RU)
Kosten
Дата: Среда, 25.10.2017, 05:11 | Сообщение # 21
Администраторы
Сообщений:15806
Награды: 51


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

Прикрепления: 9848286.png(10Kb)
Страна: (RU)
workman
Дата: Среда, 25.10.2017, 07:03 | Сообщение # 22
Гл. Модератор
Сообщений:1696
Награды: 8


Цитата Kosten ()
если написал, скинь.

Так я давно уже тебе готовые стили дал под твой вид материалов.
Страна: (RU)
waak
Дата: Среда, 25.10.2017, 12:41 | Сообщение # 23
Vip
Сообщений:332
Награды: 11


Цитата Kosten ()
waak, привет, а как делать, так чтоб кнопка шире становилась, при сужение, если помнишь, то недавно по вид материалу выставлял, помогал недавно.


всё та же! просто изменить параметры ширины на нужный так же если есть флоат то убрать его
тут мы можем не только менять параметры которые заданы но и добавить новые


Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
Kosten
Дата: Четверг, 26.10.2017, 07:03 | Сообщение # 24
Администраторы
Сообщений:15806
Награды: 51


Вопрос: Ставят @media screen and (max-width: 340px) разная ширина, здесь идет по стандарту или смотришь сам по настройке. Просто ставил сам, сжимал браузером окно на просмотре кода и если как пример берем, кнопка далее начинает съезжать, то уже сам выставляю по ней, чтоб что функция в не упиралась, чтоб пропадала.

А как нужно?
Страна: (RU)
waak
Дата: Пятница, 27.10.2017, 00:49 | Сообщение # 25
Vip
Сообщений:332
Награды: 11


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

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545
Страна: (RU)
Kosten
Дата: Пятница, 27.10.2017, 05:04 | Сообщение # 26
Администраторы
Сообщений:15806
Награды: 51


Сделал адаптивный вид материалов, это первый, и все по той информации, что здесь предоставлена.
Страна: (RU)
workman
Дата: Пятница, 27.10.2017, 06:26 | Сообщение # 27
Гл. Модератор
Сообщений:1696
Награды: 8


Kosten, Какая именно кнопка тебе не дает покоя то?
Страна: (RU)
Kosten
Дата: Суббота, 28.10.2017, 12:45 | Сообщение # 28
Администраторы
Сообщений:15806
Награды: 51


Вот пример вид материалов, он адаптивный так, что кнопка с функциями пропадает на мобильном экране. А как сделать. чтоб кнопка осталась широкой?

Как пример, ниже описание идет на всю ширину.

Прикрепления: 7251823.png(216Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 29.10.2017, 14:17 | Сообщение # 29
Администраторы
Сообщений:15806
Награды: 51


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

Вил материалов идет под адаптивность.

Код
@media only screen and (max-width: 690px){
.karunlemys-img, .karunlemys-detali {float: none!important;width: 100%!important;}
.karunlemys-detali {margin: 10px 10px 20px -11px ;}
.karunlemys-1:last-child {display: none;}
.karunlemys-detali {display: none;}
.karunlemys-img img {width: 97.3%;}
}


Где добавляем стиль.

Код
.karunlemys-1:last-child {display: table !important; float: none; width:100%; margin: 3px 2px 1px -10px; }


Что так будет.

Код
@media only screen and (max-width: 690px){
.karunlemys-img, .karunlemys-detali {float: none!important;width: 100%!important;}
.karunlemys-detali {margin: 10px 10px 20px -11px ;}
.karunlemys-1:last-child {display: none;}
.karunlemys-1 {display: none;}
.karunlemys-img img {width: 98.3%;}
.karunlemys-1:last-child {display: table !important; float: none; width:100%; margin: 3px 2px 1px -10px; }
}


И обзор уже с кнопкой.



Здесь еще можно запретить обвод у кнопки, но сама суть ясна, как кнопку вывести.

Стили находятся в комментариях.
Прикрепления: 3340167.png(120Kb)
Страна: (RU)
-SAM-
Дата: Понедельник, 30.10.2017, 15:31 | Сообщение # 30
Проверенные
Сообщений:288
Награды: 14


Цитата Kosten ()
Здесь еще можно запретить обвод у кнопки, но сама суть ясна, как кнопку вывести.
Сама суть вот:
Код
<div class="karunlemys-detali">
<div class="karunlemys-1"> [...] </div>
<div class="karunlemys-1"> [...] </div>
<div class="karunlemys-1"> [...] </div>
</div>
И соответственно:
Код
@media only screen and (max-width: 690px){
.karunlemys-detali {display: none;} /*Убирает блок весь - значит стиль этот убираем*/
.karunlemys-1 {display: none;} /*Убирает вложения*/
.karunlemys-1:last-child {display: inherit;} /*Возвращает последнее вложение*/
}

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


Страна: (UA)
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Адаптивная верстка для стандартных экранов
Страница 2 из 3«123»
Поиск: