Вопросы об адаптивном дизайне

3adob

Я здесь был вредителем, пытаясь узнать об адаптивном дизайне. Потребовалось некоторое время (много времени), чтобы это осозналось - по большей части. Теперь у меня есть несколько вопросов общего характера о навигации и меню.

Первый вопрос: независимо от того, требует ли конкретный дизайн сайта горизонтального или вертикального меню, как только я начинаю работать над частью Скрытая информация :: Авторизуйтесь для просмотра »
, является ли стандартной практикой создание медиа-запросов так, чтобы список меню отображался как блок (вертикальный)?

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

Наконец (для этого раунда), существует ли стандарт, какой тип меню – вертикальное или горизонтальное – обычно используется при дизайне сайта?

Спасибо за вклад.

. .

Smarttt

Спасибо qwikad.com. Я вроде (надеюсь) более-менее разобрался.

Я взглянул на то, что вы предложили для базового меню, и мне нравится идея создания адаптивного меню без флажка (до сих пор у меня нет четкого понимания использования флажка), и я все еще немного борюсь при попытке перейти от основного меню, которым вы поделились, к раскрывающемуся.

Возможно, я просто слишком задумываюсь над процессом.

Я склонен делать это в редких случаях (редко? да, верно) LOL Еще раз спасибо за ваше предложение.

. .

Andrey1995

Какие устройства?!? потому что здесь точно Шин-ола так не делает! Я только что протестировал три устройства, различные вкусы Android. Нада, Зип, Зилч, Нейн, Ничего... Хотя, если он ДЕЙСТВИТЕЛЬНО работает на некоторых устройствах, мне интересно, совпадают ли те, на которых он работает, с теми, на которых :focus и :active нет.

Было бы ОЧЕНЬ хорошо иметь возможность использовать «a:active + ul, a:focus + ul, a:hover + ul» для обработки этого вместо добавления флажка. В ТЕОРИИ нам следует использовать :active.

:target тоже был бы хорошим способом справиться с этим, если бы он не заполнял историю каждый раз, когда вы открываете/закрываете.

Олесь1

Это странно. На моем мобильном телефоне LG, если я открою эту ссылку (https://jsfiddle.net/p2zzqqd3/

) меню открывается нормально. Но да, ОП, вероятно, следует изменить его на: active. :target, если он захочет этим воспользоваться.

daybog

Для меня вопрос о том, отображать ли пункты меню в виде одного столбца или нет, зависит от того, сколько их, какой контент они содержат и т. д. и т. п. ОБЫЧНО я стараюсь, чтобы количество пунктов меню было достаточно низким, но я этого не делаю.

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

На самом деле все сводится к тому, сколько элементов находится в меню - быстрого и простого ответа не существует, поскольку каждый сайт имеет разные меню и разное содержимое в этих меню - и опять же, по моему мнению, содержание диктует разметку, а содержание + разметка диктует макет - НЕ наоборот.

Да, и @qwikad.com, вы же знаете, что меню бесполезно на мобильных устройствах — это и есть ПРИЧИНА адаптивного дизайна — поскольку на мобильных устройствах нет состояний наведения, верно? Вы не можете использовать это на сенсорных устройствах — это практически устраняет всю причину этого! :active может быть лучшим выбором, но он по-прежнему ненадежен.

Есть причина, по которой флажки или :target являются предпочтительным подходом только для CSS.

Александръ

Спасибо, Джейсон.

Поскольку я впервые зашел так далеко в создании сайта, мне было просто любопытно.

К сожалению, на этом сайте есть обычные материалы для простой электронной коммерции.

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

Я понятия не имею, какого уровня успеха я достиг, но это работает.

Теперь я собираюсь поработать над тем, чтобы заставить медиа-материалы работать, и, надеюсь, мне удастся добиться определенного успеха в том, чтобы заставить их работать в разных размерах (это правильное описание). Имея это в виду, я благодарю вас обоих за ваши советы и предложения.

omurz

Базовый адаптивный интерфейс (только CSS-меню):
https://jsfiddle.net/p2zzqqd3/

Другой вариант — использовать флажок. Просто погуглите «флажок адаптивной навигации» или что-то подобное..

Похожие темы	Дата
Загрузка с Shutterstock iStockphoto Fotolia на автомате -49р	19.10.2024, 18:10
помогите мне решить проблемы с медленным сайтом	19.10.2024, 18:10
Как сохранить фиксированную нижнюю высоту для этого фрагмента кода	19.10.2024, 18:10
Создание гистограммы только с помощью HTML и CSS	19.10.2024, 18:10
Сценарий конструктора веб-сайтов или система управления шаблонами?? Не уверен в правильности термина...	19.10.2024, 18:10
Javascript перебирает таблицу	19.10.2024, 18:10
Разрушение длинной формы	19.10.2024, 18:10
поместить изображение в поле таблицы	19.10.2024, 18:10
Популярность и доля рынка Drupal 8 по сравнению с WordPress	19.10.2024, 18:10
Как обновить мой код	19.10.2024, 18:10

Вопросы об адаптивном дизайне

3adob

Smarttt

Andrey1995

Олесь1

daybog

Александръ

omurz

I AM

Интересно