Публикации по теме responsive-web-design

Публикации по теме 'responsive-web-design'

Отзывчивый дизайн веб-макета

Домашняя страница считается главным входом на сайт. Когда мы ищем URL-адрес веб-сайта в браузере, первая страница, которую мы видим, — это домашняя страница. Этот раздел называется виртуальным каталогом веб-сайта. Этот веб-раздел содержит основную панель навигации, с помощью которой мы можем перейти вглубь веб-сайта и узнать другую информацию. В этом сообщении блога мы поделимся с вами еще одним фрагментом об адаптивном веб-дизайне или адаптивной домашней странице веб-сайта...

Сделайте вашу веб-страницу адаптивной

Отзывчивый веб-дизайн — это термин, который вы часто слышите, когда люди говорят о веб-разработке. Отзывчивость относится к тому, насколько эффективно веб-страница может адаптироваться или «реагировать» на отображение на экранах разных размеров. Если вы подумаете об огромном количестве различных размеров экранов, которые люди используют сегодня для доступа в Интернет, от крошечных мобильных экранов до огромных 4K-мониторов, вы можете себе представить, насколько сложно разработать сайт,..

Рендеринг динамических компонентов в React

Путеводитель по Рендеринг динамических компонентов в React Есть много способов динамического рендеринга компонентов, давайте рассмотрим некоторые из них. Введение В нашей карьере бывает множество случаев, когда одного компонента просто недостаточно. В этом руководстве будет использоваться хук под названием useScreenSize, который будет возвращать три состояния: рабочий стол, планшет и мобильный телефон, в зависимости от размера экрана. Мы собираемся визуализировать отдельный..

Использование размера окна в JavaScript

Экосистеме современных устройств требуются веб-страницы, которые плавно изменяют размер и положение элементов на экране в зависимости от размера экрана — другими словами, адаптивные веб-страницы. CSS предлагает отличный инструмент для создания адаптивных веб-страниц: медиа-запросы. Если вы не знакомы с CSS, в приведенном ниже примере показан медиа-запрос, который добавляет стиль к определенным элементам на странице, когда ширина экрана составляет не менее 1024 пикселей. @media screen..

COVID-19 Индия Визуализация

Я наткнулся на надежные краудсорсинговые данные о COVID-19 для Индии. Хотел попробовать визуализировать это. Создал веб-страницу с библиотекой Angular и ng2-charts. Выберите пузырьковую диаграмму для визуализации; Пытался сделать его интерактивным и в то же время удобным для мобильных устройств. Ниже приводится краткое описание моего проекта выходного дня. COVID-19 Индия Визуализация Пузырьковая диаграмма на основе Angular для данных Corona Virus На веб-странице отображаются данные..

Создание игры сопоставления памяти на JavaScript

Недавно я наткнулся на статью Сандры Исраэль о том, как она создала игру сопоставления памяти для своего проекта FEND (найдена здесь ), и мне показалось, что это было весело, поэтому я решил продолжить и повторить кое-что. нравится это. I Однако у меня был поворот. Я хотел, чтобы приложение было как можно более легким - без адаптивных фреймворков, без библиотек JavaScript, без специальных библиотек шрифтов значков (я люблю ваш шрифт потрясающий, но…) - только HTML, CSS и ванильный..

Реагирование на высоту с использованием calc() CSS

Я хотел бы поделиться небольшим примером использования calc() CSS, который помог мне добиться отклика на высоту. Мой вариант использования выглядит следующим образом Родительский элемент с некоторой статической высотой. Три дочерних элемента (для справки назовем их c1, c2 и c3), которые должны заполнить родителя. Из трех дочерних элементов два из них (c1 и c3) будут иметь статическую высоту, а c2 должен занимать оставшееся пространство. И c2 должен регулировать свою высоту при..