Публикации по теме 'responsive-design'
Создание гамбургер-меню с помощью Chakra-UI — практический пример использования JavaScript в useState
Прочитайте этот пост с подсветкой синтаксиса кода на Coffeeclass.io .
Введение
Если вы знакомы с Bootstrap, вы знаете, как легко создать адаптивную панель навигации. В Чакре-UI нет встроенного готового решения. В этом посте мы создадим адаптивный компонент панели навигации, который вы сможете использовать в своем приложении React.
Не стесняйтесь просмотреть мою видеоверсию этой статьи.
Идея
Мы создадим 2 панели навигации и будем использовать useState для динамического..
Создание отзывчивого и динамичного индикатора выполнения
Пару лет назад, в 2018 году, я написал короткую статью о создании адаптивного индикатора выполнения с шагами. С тех пор мои методы развились, поэтому необходимо обновление. Самое большое изменение заключается в том, что псевдоэлементы (до, после) больше не требуются. Теперь CSS стал более простым, DOM легче читать и он намного динамичнее. Итак, давайте попробуем это снова.
Цель – простой и эффективный адаптивный индикатор выполнения, выполняющий следующие функции:
Имеет четыре..
Отзывчивый: это круто
Если вы знакомы с адаптивным дизайном и используете React, я определенно рекомендую использовать response-responseive . React-responseive позволяет создавать компоненты медиа-запросов в React. Это может быть очень полезно, когда вы хотите отобразить или удалить определенные элементы в DOM в зависимости от размера экрана. Кроме того, вы можете реструктурировать свою DOM (с точки зрения стилей CSS / Sass) по мере необходимости.
Ссылка и инструкции по его использованию находятся ниже..
8 лучших практик SCSS
Почему ваш CSS должен быть в первую очередь мобильным и другие полезные советы
На прошлой неделе у меня была возможность ознакомиться с рекомендациями компании по кодированию, некоторые из которых я нашел очень полезными не только для совместной работы, но и для разработки личных проектов.
Вот восемь лучших практик SCSS из тех руководств, которые заставили меня переосмыслить то, как я структурирую свой код CSS.
1. Сначала мобильные
Когда дело доходит до адаптивного дизайна, обычно..
Srcset и размеры: адаптивные изображения
Почему адаптивные изображения?
Эти новые атрибуты доступны уже некоторое время. Однако до конца понять его мне не удалось. Есть отличные статьи, объясняющие этот новый синтаксис. Но я не мог уложить это в голове. И особенно я пропустил в этих статьях, как можно применить srcset и sizes к реальным проблемам.
Вот почему я написал эту статью о srcset и sizes . Он поставляется с примером общего макета веб-сайта: страница с боковой панелью. Я надеюсь, что это поможет вам..
3 мощных пользовательских миксина и функции SASS, которые сделают стилизацию невероятно простой
При разработке веб-приложения его стиль так же важен, как и его функциональность, потому что чистый и стильный внешний вид действительно может быть причиной того, что некоторые пользователи не покидают сайт. Например, когда человек сталкивается с веб-сайтом, который выглядит более элегантно, чем другие, он / она посмотрит на веб-сайт и начнет использовать его с большим энтузиазмом. Таким образом, необходимо плавно стилизовать веб-сайт.
Основной технологией веб-стилизации является CSS..
Вопросы по теме 'responsive-design'
css медиа-запросы: таргетинг на мобильные устройства без указания ширины, соотношения пикселей и т. д.
Допустим, я просто хочу настроить таргетинг на каждый планшет и телефон, независимо от размера. Есть ли для этого медиа-запрос? Можно ли это сделать без указания размера? Или использование размера — единственный способ ориентироваться на мобильные...
14864 просмотров
schedule
07.03.2024
Пример адаптивного макета Masonry jQuery
Кто-нибудь может подсказать, как этот сайт использует плагин jQuery Masonry для адаптивного и гибкого макета?
http://tympanus.net/codrops/collective/collective-2/
Конкретно;
Количество столбцов изменяется с 3 на 2 или 1 при изменении...
18232 просмотров
schedule
29.06.2022
Ошибка столбцов CSS — при подсчете 5 столбцов отображается только 4 (с изображениями)
Я пытаюсь реализовать приведенный Крисом Койером пример использования столбцов CSS для создания бесшовного адаптивная сетка изображений.
Я поместил файлы Криса на свой сервер, и все выглядело нормально. Единственное, что я изменил, это сами...
4597 просмотров
schedule
10.08.2023
Замена полосы прокрутки для мобильных устройств — области с вкладками
Итак, у меня есть области с вкладками на сайте, который я разрабатываю, из-за моего макета мне нужно, чтобы все области с вкладками имели одинаковую высоту. Сначала я подумал: «О, круто, я просто сделаю display: scroll; и получу полосу прокрутки»....
750 просмотров
schedule
06.03.2023
Делаем AdSense адаптивным
Я владелец сайта, в настоящее время использую AdSense для монетизации. Я решил изменить дизайн своего сайта на адаптивный, чтобы сайт мог правильно отображаться на экранах разных размеров, но, к сожалению, AdSense не очень гибок в этом отношении....
4489 просмотров
schedule
28.09.2023
jQuery: как определить ширину окна на лету?
У меня есть элемент прокрутки на моей странице (с плагином jScrollPane jQuery). Чего я хочу добиться, так это отключить окно прокрутки, определив ширину окна браузера. Я делаю адаптивный макет и хочу, чтобы эта функция прокрутки отключалась, когда...
219542 просмотров
schedule
29.11.2023
Самый быстрый способ сделать сайт адаптивным?
Раньше я использовал Zurb Foundation и Skeleton, поэтому я знаком с обоими, но мне никогда раньше не приходилось преобразовывать существующий веб-сайт в адаптивный веб-сайт. Какой самый быстрый способ конвертировать мой сайт? Используя структуру,...
36883 просмотров
schedule
25.04.2023
Загрузка и выгрузка JavaScript с учетом медиазапросов CSS
Я использую CSS Media Queries, чтобы сделать мой сайт отзывчивым:
@media (min-width:1200px) {
// DESKTOP STYLING
}
@media (max-width:1200px) {
// MOBILE STYLING
}
Я использую https://github.com/paulirish/matchMedia.js для проверки...
3121 просмотров
schedule
07.12.2023
Отзывчивая панель навигации Twitter Bootstrap не работает на маленьких экранах
Я читал документы и сравнивал свой код с примерами Bootstrap, но не могу понять, почему панель навигации на моем сайте падает примерно на 100 пикселей, когда я уменьшаю окно браузера или просматриваю его на телефоне....
17539 просмотров
schedule
03.03.2024
медиазапрос для galaxy s2
Я разработал адаптивную тему для своего веб-сайта, используя медиа-запросы в моем файле css.
он отлично работает на iPad/iPhone и небольших телефонах Android. Когда я добираюсь до Galaxy S2, он, кажется, игнорирует мои медиа-запросы.
Это...
7740 просмотров
schedule
07.02.2023
Использование скелета с сеткой из 24 столбцов
У меня есть макет фотошопа веб-сайта, созданного с помощью 960gs с 24 столбцами. Я также хочу, чтобы он реагировал на шаблон скелета http://www.getskeleton.com/ .
Поскольку мой дизайн основан на 24 столбцах, а скелет поддерживает 16 столбцов,...
1846 просмотров
schedule
16.04.2023
Как загрузить разное видео для мобильных устройств и десктопной веб-версии?
Я разрабатываю веб-сайт с использованием адаптивной веб-технологии и HTML5. У меня есть видео высокого качества с разрешением 720x576, которое я встраиваю с помощью тегов HTML5 <video> и <source> .
Но так как это очень тяжелое...
4546 просмотров
schedule
16.08.2023
CSS для изображений с высоким разрешением на мобильных устройствах и дисплеях Retina
Изображения на моем веб-сайте выглядят размытыми для пользователей с дисплеями Retina. (Например, на Retina MacBook Pro).
Как показывать изображения с высоким разрешением посетителям с дисплеями Retina, а изображения стандартного размера — всем...
6065 просмотров
schedule
15.10.2023
оптимизация CSS 720*1280 для мобильных устройств
Я пытаюсь оптимизировать свою веб-страницу для мобильных устройств с разрешением 720*1200: Моя страница
Он отлично работает на устройствах 320*480 и 480*800, но не на 720*1200. Страница загружается с увеличенным масштабом, точно так же, как...
3147 просмотров
schedule
12.09.2022
Отзывчивый веб-дизайн на основе пикселей
Однако в большинстве адаптивных дизайнов используются гибкие макеты:
Можно ли использовать пиксельный/фиксированный макет для адаптивного дизайна (очевидно, точки останова будут гораздо более заметными)
Есть ли примеры адаптивного дизайна на...
685 просмотров
schedule
15.04.2022
как сделать лайтбокс2 отзывчивым
Я посмотрел здесь: http://drupal.org/node/1630630 , но это только для сайтов Drupal. Кто-нибудь знает, как настроить обычную библиотеку lightbox2 , чтобы сделать ее адаптивной и отображать на маленьком мобильном экране?
под «отзывчивым» я...
12055 просмотров
schedule
24.01.2024
Динамическое окно просмотра для мобильных устройств всегда содержит видеопроигрыватель фиксированных размеров.
У меня есть универсальная оболочка для видео, которую я пытаюсь адаптировать для мобильных устройств. Что я хотел бы сделать, так это динамически изменять область просмотра, чтобы видео всегда могло поместиться внутри него в любой ориентации. Я...
1519 просмотров
schedule
20.09.2023
Мобильный сайт для большого сайта с фоновым изображением
У меня есть большая страница генерации лидов с фоновым изображением http://minkstock.com
Я хочу сделать его совместимым с мобильными устройствами, но не хочу загружать огромное изображение, которое я использую в качестве фона на веб-сайте для...
440 просмотров
schedule
01.05.2023
Как сделать адаптивные изображения четкими?
Я использую метод адаптивного изображения, который заключается в том, чтобы установить максимальную ширину на 100%, чтобы изменить размер моих изображений в соответствии с разрешением/размером экрана. Однако, когда я помещаю изображение в div с...
1783 просмотров
schedule
13.12.2023
Адаптивный веб-дизайн и изменение размера изображений
Отзывчивый веб-дизайн отлично работает с большинством html-элементов, кроме изображений. Я нахожу это беспорядочным. При изменении размера видовых экранов вы не можете использовать проценты изменения размера изображения, поскольку оно примет ширину и...
22119 просмотров
schedule
09.07.2023
