• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 2 из 3
  • «
  • 1
  • 2
  • 3
  • »
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивная верстка для стандартных экранов (Как сделать адаптивный стиль дизайн сайта под все разрешения)
Адаптивная верстка для стандартных экранов
workman
 		Среда, 25 Октября 2017, 00:39 | Сообщение 16
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата Kosten ()
что то не понял, нужно поменять?

Я уже написал быстрее полный вид пока ты там что-то смотрел у себя ))
Страна: (RU)
Kosten
 		Среда, 25 Октября 2017, 00:42 | Сообщение 17
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
workman, по другому сделал, можешь посмотреть?
Страна: (RU)
Kosten
 		Среда, 25 Октября 2017, 00:43 | Сообщение 18
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
workman, если написал, скинь. 11a
Страна: (RU)
waak
 		Среда, 25 Октября 2017, 00:56 | Сообщение 19
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Тут начало темы не так написано просто по этому есть вопросы у людей
так как человек написал сразу медиа запросы а не как они работают

первое возьмём блок к примеру с классом .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% тем самым сделали её по размеру экрана так же сделали высоту авто так как блок должен растягиваться по контенту что в нём ну и убрали отступы всё это не обязательно каждый параметр можно изменять отдельно или не трогать вообще

Сообщение отредактировал
waak - Среда, 25 Октября 2017, 01:01
Страна: (RU)
Kosten
 		Среда, 25 Октября 2017, 05:08 | Сообщение 20
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
waak, привет, а как делать, так чтоб кнопка шире становилась, при сужение, если помнишь, то недавно по вид материалу выставлял, помогал недавно.
Страна: (RU)
Kosten
 		Среда, 25 Октября 2017, 05:11 | Сообщение 21
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Если судит про мобильные аппараты, и сколько процентов заходят на сайты. То берем группу в контакте по сайту ZorNet.Ru и там вот такой процент, возможно кто то по ссылке на сайт заходил.
Прикрепления: 9848286.png (9.9 Kb)
Страна: (RU)
workman
 		Среда, 25 Октября 2017, 07:03 | Сообщение 22
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата Kosten ()
если написал, скинь.

Так я давно уже тебе готовые стили дал под твой вид материалов.
Страна: (RU)
waak
 		Среда, 25 Октября 2017, 12:41 | Сообщение 23
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
Цитата Kosten ()
waak, привет, а как делать, так чтоб кнопка шире становилась, при сужение, если помнишь, то недавно по вид материалу выставлял, помогал недавно.


всё та же! просто изменить параметры ширины на нужный так же если есть флоат то убрать его
тут мы можем не только менять параметры которые заданы но и добавить новые
Страна: (RU)
Kosten
 		Четверг, 26 Октября 2017, 07:03 | Сообщение 24
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Вопрос: Ставят @media screen and (max-width: 340px) разная ширина, здесь идет по стандарту или смотришь сам по настройке. Просто ставил сам, сжимал браузером окно на просмотре кода и если как пример берем, кнопка далее начинает съезжать, то уже сам выставляю по ней, чтоб что функция в не упиралась, чтоб пропадала.

А как нужно?
Страна: (RU)
waak
 		Пятница, 27 Октября 2017, 00:49 | Сообщение 25
Оффлайн
Проверенные
Сообщений:588
Награды: 14
« 166 »
размер ставишь сам для каждого блока кнопки или выбираешь максимально подходящий для всего но проще сделать для кнопки свой к примеру если ей раньше нужно то меняешь размер в медиа запросе и вписываешь туда стили для кнопки а для других элементов делаеш другой медиа запрос со своими стилями так же если нужно при размере меньше чем 340 сделать что то ещё то добавь ещё один мелиа запрос нужным размером и стилями всё просто как два плюс два
Страна: (RU)
Kosten
 		Пятница, 27 Октября 2017, 05:04 | Сообщение 26
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Сделал адаптивный вид материалов, это первый, и все по той информации, что здесь предоставлена.
Страна: (RU)
workman
 		Пятница, 27 Октября 2017, 06:26 | Сообщение 27
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Kosten, Какая именно кнопка тебе не дает покоя то?
Страна: (RU)
Kosten
 		Суббота, 28 Октября 2017, 12:45 | Сообщение 28
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Вот пример вид материалов, он адаптивный так, что кнопка с функциями пропадает на мобильном экране. А как сделать. чтоб кнопка осталась широкой?

Как пример, ниже описание идет на всю ширину.
Прикрепления: 7251823.png (216.3 Kb)
Страна: (RU)
Kosten
 		Воскресенье, 29 Октября 2017, 14:17 | Сообщение 29
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Спасибо пользователю 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 (119.9 Kb)
Страна: (RU)
-SAM-
 		Понедельник, 30 Октября 2017, 15:31 | Сообщение 30
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
« 597 »
Цитата 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;} /*Возвращает последнее вложение*/
}
Правильно написали, что я лишь навёл на мысль, а полный код не давал - не ставил и не проверял... теперь, когда вы это сделали и заскринили, то уже видно, что не совсем то, что быть должно.


Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивная верстка для стандартных экранов (Как сделать адаптивный стиль дизайн сайта под все разрешения)
  • Страница 2 из 3
  • «
  • 1
  • 2
  • 3
  • »
Поиск: