Публикации по теме 'responsive-design'
Не используйте 100vh для мобильных устройств.
Как правило, мы используем height:100vh для полноэкранного макета, что является простым приемом и удобным способом улучшить дизайн.
Пример
.content {
height: 100vh;
}
Но когда мы тестируем наш дизайн на реальном устройстве, мы сталкиваемся с несколькими проблемами:
В основном браузеры Chrome и Firefox на мобильных устройствах имеют пользовательский интерфейс (адресную строку и т. д.) вверху. В Safari это становится сложнее, адресная строка находится внизу. В разных..
День 20: 100 дней кода…
и проектов в изобилии.
Сегодня я сделал перерыв, не узнавая ничего нового. Вместо этого я сосредоточился на своем веб-сайте портфолио и использовал React для его создания.
Использование моих новых знаний
Моя предыдущая попытка сделать портфолио оказалась долгой и утомительной. Я не использовал React или какие-либо фреймворки. Я полагался на ванильный JavaScript, который, хотя и быстрее, чем React, требует много дополнительной работы.
Поэтому в новом портфеле использовалась..
Flutter: улучшите свое приложение с помощью отзывчивых и адаптивных макетов
Откройте для себя силу отзывчивого и адаптивного дизайна во Flutter с помощью самых полезных виджетов и одного практического примера.
Во Flutter создание красивых и функциональных пользовательских интерфейсов не требует глубокого понимания механизма компоновки фреймворка, но необходимо следовать основным…
Что нового в Zurb Foundation 6?
Первоначально выпущенный в ноябре 2015 года, Zurb Foundation for Sites 6 содержит некоторые новые функции, функции и концепции. В этом посте предполагается, что у вас уже есть опыт работы с Foundation: если вы новичок, надеюсь, он хотя бы прольет свет на структуру и инструменты, а также даст общее представление о том, чего ожидать.
Хотя основные принципы и идеи Foundation остаются, при сравнении последнего кода с предыдущей версией можно увидеть почти полную переработку. Сразу же вы..
Как мы тестируем адаптивные изображения на Unsplash
В Unsplash одна очень распространенная проблема, с которой нам приходится сталкиваться, - это адаптивные изображения. Как мы можем предоставлять изображения подходящего размера для огромного количества устройств, которые посещают наш веб-сайт - для всех типов размеров экрана, соотношения пикселей устройства и т. Д.?
Чтобы решить эту проблему, мы используем сочетание элемента img с его атрибутами srcset и sizes вместе с элементом picture . Однако, по нашему опыту, самое..
Вопросы по теме 'responsive-design'
Выравнивание полей формы и исправление адаптивного макета
Я сейчас кодирую HTML-форму, и у меня возникла небольшая проблема с выравниванием поля комментариев справа от текстовых полей.
У меня есть 3 текстовых поля друг под другом, и я хочу, чтобы текстовое поле комментариев было выровнено справа от них, я...
1676 просмотров
schedule
03.11.2022
Предотвращение сворачивания меню при отображении 768px медиа-запроса CSS
Я пытаюсь сделать сайт с помощью twitter bootstrap. У меня относительно меньше меню, поэтому оно также подходит для дисплея с разрешением 768 пикселей. Но в бутстрапе по умолчанию меню сворачивается с помощью медиазапросов. Я не могу предотвратить...
72478 просмотров
schedule
15.02.2024
Адаптивные изображения в таблице гибкой ширины (max-width)
Рассмотрим следующий фрагмент кода:
HTML:
<div>
<img src="http://placehold.it/600x150" />
</div>
CSS:
div { max-width: 200px }
img { max-width: 100% }
Изображение никогда не будет шире 200 пикселей,...
14184 просмотров
schedule
13.12.2022
Адаптивная HTML5-бг с контейнером позиционированных ссылок
Я в тупике после очень скромных 15 часов попыток. :/ Я делаю халяву, потому что это выглядело как простой OPP для проверки теорий для сайта, реагирующего на устройства. Нет. У меня такое чувство, что, возможно, я слишком много думаю об этом. Это...
231 просмотров
schedule
07.12.2023
Twitter Bootstrap: остановить поле ввода, выходящее за рамки
У меня возникли проблемы с попыткой решить эту проблему. В документах говорится, что я должен установить диапазон, равный родительскому диапазону, однако, когда я это делаю, он распространяется вправо за пределы контейнера скважины. Он выглядит...
10606 просмотров
schedule
01.11.2022
Как избежать бесконечного цикла с переходом CSS3 и вертикальной полосой прокрутки в Webkit?
Предыстория:
Я пытаюсь плавно переходить между различными презентациями моего веб-сайта, используя медиа-запросы и переходы CSS3. Пока что все кажется крутым, однако я столкнулся с проблемой при переходе между презентацией, которая содержит...
941 просмотров
schedule
21.04.2024
Отзывчивые css спрайты + сетчатка
Я много читал на эту тему в последние дни, но решения так и не нашел. У меня есть два набора спрайтов, один с низким качеством для обычных дисплеев и один с высоким качеством для дисплеев сетчатки.
Моя проблема в том, что мой сайт должен быть...
3301 просмотров
schedule
19.12.2023
Динамическое окно просмотра для d3.js
Возможный дубликат: Как лучше всего сделать макет визуализации d3.js адаптивным?
Все примеры D3, которые я видел, делают что-то вроде этого:
var width = 1500,
height = 1500;
var svg = d3.select('body')...
469 просмотров
schedule
07.11.2022
Zurb's Foundation 3: меньшая ширина сетки
Работал с фреймворком Zurb Foundation 3 .
Я пытаюсь установить ширину меньше 1000 пикселей в _settings.scss, но по какой-то причине она уменьшается только до 770 пикселей, даже если я ввожу меньшее число. Вот что я сделал:
Исполненный...
327 просмотров
schedule
22.01.2024
изменить фоновое изображение по клику с помощью jquery и html5
Как я могу изменить фоновое изображение onClick с помощью jquery или java-скрипта?
Например: у меня есть шесть (6) изображений, и я хочу перейти на СЛЕДУЮЩЕЕ фоновое изображение, когда я нажимаю «>» (следующая стрелка), и перейти на предыдущее...
3840 просмотров
schedule
24.05.2024
Запросы @media не работают на телефоне Android (Chrome)
ОБНОВЛЕНИЕ Я решил свой вопрос. Смотри ниже.
Я сделал сайт с начальной загрузкой и дополнительными запросами @media для оформления сайта. На рабочем столе он показывает мобильный макет, когда я изменяю размер браузера, но на моем телефоне он...
1299 просмотров
schedule
23.02.2024
Заставить Internet Explorer 9 выполнять javascript при анализе страницы?
Фон
Я работаю над подключаемым модулем адаптивных изображений для используемой мной CMS, и я решил использовать метод немедленного набора файлов cookie, чтобы сообщить серверу размеры экрана пользователя.
Для тех, кто не знаком с этим, это...
595 просмотров
schedule
20.12.2023
Проблема с ссылкой и автофокусом на устройстве iPhone с адаптивным дизайном
У меня очень странная проблема. Я преобразовал наш сайт в первый адаптивный дизайн. В нашей мобильной версии у меня есть href с тел: (номер телефона), который выглядит как изображение.
Чуть ниже по ссылке находится форма, которая у нас есть....
167 просмотров
schedule
13.01.2024
Адаптивные изображения и отрицательное поле
У меня есть сайт, на котором есть элемент с отступами. Я хочу, чтобы изображения были на всю ширину контейнера независимо от отступов, поэтому я добавил отрицательное поле, равное отступу, чтобы оно растягивалось прямо до края. Проблема возникает,...
2884 просмотров
schedule
11.03.2024
jQuery Mobile смахивает в никуда
Я нашел еще один вопрос SO, в котором была скрипка с функциональностью, аналогичной тому, что я пытаюсь сделать. Однако вместо того, чтобы переходить к новому div, я хотел бы просто сдвинуть div с экрана.
http://jsfiddle.net/yxzZf/4/...
357 просмотров
schedule
04.01.2024
Wordpress, создание поста с адаптивными изображениями
Я хотел бы создать новый адаптивный веб-сайт Wordpress с адаптивными изображениями для смартфонов, планшетов и компьютеров.
Я создал функцию javascript (работает), которая загружает правильное изображение в соответствии с шириной устройства.
Вот...
233 просмотров
schedule
27.01.2024
Жидкость (Coda) Высота слайдера не регулируется
Я использую Liquid Slider (адаптивную версию Coda Slider) для своего сайта-портфолио.
Один из слайдов — это список проектов/клиентов. Когда пользователь щелкает один из них, он остается на том же слайде, но список заменяется деталями проекта....
1220 просмотров
schedule
23.01.2024
Адаптивное меню в теме WordPress с использованием jquery
У меня есть меню вертикальной навигации для темы WordPress, которая работает правильно. Моя тема реагирует с использованием медиа-запросов css3. Медиа-запросы для навигации с одноуровневым подменю для размера экрана 768 x 1024 (портретный режим)...
1202 просмотров
schedule
01.03.2024
Изменение размера CSS на основе ключевых переменных
Я создал макет сетки с динамическим размером, который может разумно адаптироваться к разрешению любого размера (телефон, планшет, рабочий стол) и управлять изменением размера, и при этом он почти идеален в пикселях (извините, у меня ОКР — и я говорю...
110 просмотров
schedule
11.12.2023
Адаптивный дизайн — кнопка «Подробнее» только на небольших экранах
Нам нужна возможность ограничить количество текста, отображаемого на мобильном устройстве. Мы надеялись сделать это аналогично различным подключаемым модулям «Подробнее» ( http://plugins.learningjquery.com/expander/index.htm ), где мы вызываем...
5757 просмотров
schedule
20.01.2024
