Как работает отзывчивый дизайн?

-1

После проверки нескольких десятков статей я все еще в темноте, как на самом деле реализовать отзывчивый ux-дизайн (я действительно понял часть макета). Простой пример: Bootstrap (CSS framework) сворачивает кнопки панели инструментов в одну раскрывающуюся кнопку на мобильных телефонах. Это все, что мне нужно! Я хотел бы понять только основы этого самого поведения. Требуется ли только CSS, или мне нужен JavaScript? На самом деле я не знаю другого способа, кроме JavaScript.Как работает отзывчивый дизайн?

В моих приложениях (IDE) у меня обычно есть много кнопок на панели инструментов и при определенной точке останова или ширине, я думаю, мне придется просто поместить их в раскрывающуюся кнопку, так или иначе, верно? Очевидные вещи, такие как повторная компоновка контейнеров макетов на точку разрыва/ширину, - это кусок пирога с CSS; по крайней мере, так оно и выглядит.

Обновление, я работаю только с виджетами на основе JS. В основном генерирует все HTML.

источник

2015-06-05 xamiro

возможно дубликат [Отзывчивый веб-дизайн советы, рекомендации и методы динамического изображения Масштабирование] (http://stackoverflow.com/questions/8429058/responsive-web-design- советы-лучшие практики и динамические масштабирования-методы) –

Вы ищете медиа-запросы. – SLaks

@TAOP не совсем, именно это я могу получить из любого блога. Не говорит, что мне нужно сделать, переделать или преобразовать виджеты; но спасибо за подсказку! – xamiro

После много исследований и разработок; в принципе нет ничего стандартного для решения на основе JS. Я проверил Додзё, Сенчу и некоторых других. В конце концов у меня появился пользовательский JS-код. Запросы в средствах массовой информации помогли в определенной степени, фактически, когда дело доходит до перемещения и калибровки макетов контейнеров и изображений; но это в значительной степени. Его еще лучше сделать это в JS только с тех пор, как расчеты становятся намного точнее и меньше мешают вашему Коду.

Так что для меня «отзывчивый дизайн» на самом деле не имеет никакого значения; он отлично подходит для обычных веб-сайтов, но на самом деле не для сложного ux.

возвращается на круги своя, г

источник

2015-06-23 00:38:49 xamiro

Проверьте GRID. Это (отличное) простое руководство для гибкого дизайна.

http://adamkaplan.me/grid/

источник

2015-06-05 02:15:29 nunoarruda

спасибо, я получил часть макета, но я до сих пор не знаю, как управлять своими виджетами, т. Е. Сворачивать их во что-то меньшее. – xamiro

@ mc007 проверить запросы к мультимедиа CSS. Вы можете использовать их для изменения ширины ваших виджетов в зависимости, например, от размера экрана. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – nunoarruda

спасибо, мои виджеты уже сведены к минимуму (32 или 16 символов шрифта); я не могу сделать их меньше :-) – xamiro

Вы можете сделать несколько (для разных размеров экрана) меню, выпадающие или NavBars и т.д., а затем использовать медиа-запросы, чтобы просто отображать один из них при определенной ширине экрана (т.е. display: none для других). И я думаю, что Bootstrap работает аналогично (он также может использовать JS).

Таким образом, ваш дизайн станет отзывчивым, хотя он увеличит размер файла.

источник

2015-06-05 02:28:36 Mustaghees

Как работает отзывчивый дизайн?

ответ

Смежные вопросы