Форум об интернет-маркетинге
Вернуться   Форум об интернет-маркетинге > Технические вопросы > Веб-строительство

Ответ
 
Опции темы
Старый 28.06.2020, 14:19   #1
medexpert
Member
Аспирант
 
Аватар для medexpert
 
Регистрация: 21.06.2020
Сообщений: 87
Сказал(а) спасибо: 44
Получил(а) "Спасибо": 30
Нарушения: 0/0 (0)
Репутация: 111937

Thread Starter Адаптивная вёрстка

Специалисты, кто какие CSS-коды (медиа запросы) применяет?
У меня сейчас модальное окно сделано под самый маленький смартфон - 320х640
Код:
@media only screen and (max-width: 746px) {
	... { 
		...
	}
}
Надо добавить другие размеры.
"... Нет того веселья:
Или куришь натощак,
Или пьёшь с похмелья."
medexpert вне форума   Ответить с цитированием
Старый 28.06.2020, 14:26   #2
XPraptor
Думаю, что надо худеть
Академик
 
Аватар для XPraptor
 
Регистрация: 22.06.2020
Сообщений: 1,791
Сказал(а) спасибо: 1,526
Получил(а) "Спасибо": 1,939
Нарушения: 0/0 (0)
Репутация: 608321

По умолчанию Re: Адаптивная вёрстка

Да по дизайну смотрите, сжимайте, и в ключевых разрешениях (ноут, планшет, телефон) добавляйте точки, чтобы блоки и контент оставались читаемыми.
XPraptor вне форума   Ответить с цитированием
Старый 28.06.2020, 14:34   #3
Sitealert
Слесарь-сайтосборщик
Доцент
 
Регистрация: 22.06.2020
Адрес: Замкадье
Сообщений: 403
Сказал(а) спасибо: 985
Получил(а) "Спасибо": 1,178
Нарушения: 0/0 (0)
Репутация: 180645

По умолчанию Re: Адаптивная вёрстка

Цитата:
Сообщение от medexpert Посмотреть сообщение
У меня сейчас модальное окно сделано под самый маленький смартфон - 320х640
Код:
@media only screen and (max-width: 746px) {
	... { 
		...
	}
}
Надо добавить другие размеры.
Вообще-то цифра 746 – какая-то странная
Базовые точки известны, по необходимости добавить точки для телефонов (320, 480) и какие-то правила для мобильных устройств с большим разрешением и для десктопов с большим экраном.
Sitealert вне форума   Ответить с цитированием
Сказали спасибо:
Старый 28.06.2020, 14:54   #4
ziliboba0213
Позитив =)
Академик
 
Аватар для ziliboba0213
 
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,367
Сказал(а) спасибо: 24,634
Получил(а) "Спасибо": 13,444
Нарушения: 0/0 (0)
Репутация: 1085558

По умолчанию Re: Адаптивная вёрстка

@media screen разве работает?
ziliboba0213 вне форума   Ответить с цитированием
Старый 28.06.2020, 15:05   #5
Sitealert
Слесарь-сайтосборщик
Доцент
 
Регистрация: 22.06.2020
Адрес: Замкадье
Сообщений: 403
Сказал(а) спасибо: 985
Получил(а) "Спасибо": 1,178
Нарушения: 0/0 (0)
Репутация: 180645

По умолчанию Re: Адаптивная вёрстка

А почему нет?
Sitealert вне форума   Ответить с цитированием
Старый 28.06.2020, 15:25   #6
ziliboba0213
Позитив =)
Академик
 
Аватар для ziliboba0213
 
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,367
Сказал(а) спасибо: 24,634
Получил(а) "Спасибо": 13,444
Нарушения: 0/0 (0)
Репутация: 1085558

По умолчанию Re: Адаптивная вёрстка

Цитата:
Сообщение от Sitealert Посмотреть сообщение
А почему нет?
Я чего-то давно вроде верстал как-то, когда на адаптив свой сайтик переносил, то ли определение устройств не работало, то ли я чего напутал или не помню...
ziliboba0213 вне форума   Ответить с цитированием
Старый 28.06.2020, 15:34   #7
Sitealert
Слесарь-сайтосборщик
Доцент
 
Регистрация: 22.06.2020
Адрес: Замкадье
Сообщений: 403
Сказал(а) спасибо: 985
Получил(а) "Спасибо": 1,178
Нарушения: 0/0 (0)
Репутация: 180645

По умолчанию Re: Адаптивная вёрстка

Да работает всё, другое дело, что лично я screen без надобности не использую, но на обслуживаемых сайтах постоянно встречается. Вот сейчас, например, интегрирую вёрстку на Битрикс, вполне работающий код:
Тип файла: jpg 026.jpg (23.0 Кб, 28 просмотров)
Sitealert вне форума   Ответить с цитированием
Сказали спасибо:
Старый 28.06.2020, 15:35   #8
ziliboba0213
Позитив =)
Академик
 
Аватар для ziliboba0213
 
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,367
Сказал(а) спасибо: 24,634
Получил(а) "Спасибо": 13,444
Нарушения: 0/0 (0)
Репутация: 1085558

По умолчанию Re: Адаптивная вёрстка

Цитата:
Сообщение от Sitealert Посмотреть сообщение
Да работает всё, другое дело, что лично я screen без надобности не использую, но на обслуживаемых сайтах постоянно встречается. Вот сейчас, например, интегрирую вёрстку на Битрикс, вполне работающий код:
А если max-width убрать?

Блин, а чего я то когда верстал уперся в это... Хоть убейте не помню...
ziliboba0213 вне форума   Ответить с цитированием
Старый 28.06.2020, 15:38   #9
Sitealert
Слесарь-сайтосборщик
Доцент
 
Регистрация: 22.06.2020
Адрес: Замкадье
Сообщений: 403
Сказал(а) спасибо: 985
Получил(а) "Спасибо": 1,178
Нарушения: 0/0 (0)
Репутация: 180645

По умолчанию Re: Адаптивная вёрстка

Цитата:
Сообщение от ziliboba0213 Посмотреть сообщение
А если max-width убрать?
Не пробовал. Но @media print {} использовал, точно работает. А screen без размеров как-то ни к чему, это как бы дефолт.
Sitealert вне форума   Ответить с цитированием
Сказали спасибо:
Старый 28.06.2020, 16:54   #10
medexpert
Member
Аспирант
 
Аватар для medexpert
 
Регистрация: 21.06.2020
Сообщений: 87
Сказал(а) спасибо: 44
Получил(а) "Спасибо": 30
Нарушения: 0/0 (0)
Репутация: 111937

Thread Starter Re: Адаптивная вёрстка

Спасибо, то что надо. Предстоит "пара дней" работы
Здоровья Всем!
medexpert вне форума   Ответить с цитированием
Сказали спасибо:
Ответ


Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 19:10. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc. Перевод: zCarot