Публикации по теме 'media-queries'
Сделайте вашу веб-страницу адаптивной
Отзывчивый веб-дизайн — это термин, который вы часто слышите, когда люди говорят о веб-разработке. Отзывчивость относится к тому, насколько эффективно веб-страница может адаптироваться или «реагировать» на отображение на экранах разных размеров. Если вы подумаете об огромном количестве различных размеров экранов, которые люди используют сегодня для доступа в Интернет, от крошечных мобильных экранов до огромных 4K-мониторов, вы можете себе представить, насколько сложно разработать сайт,..
Бол Сонор
На этой неделе я разработал веб-сайт в виде генератора хрустальных поющих чаш. Это был интерфейсный проект с использованием HTML, CSS и Javascript. Задание требовало от меня демонстрации манипуляций с DOM, получения API, включения как минимум 4 HTML-страниц и использования Bootstrap по крайней мере для одного элемента.
Я использовал API ежедневных котировок из «Они так сказали» на главной странице. Я бы предпочел иметь API, который меняет вдохновляющую цитату при каждом обновлении..
Создайте свой собственный RxJS Observable для Dark Mode, используя Media Queries
Демо ссылка
Одной из последних функций, доступных в браузерах, является возможность выполнять CSS Media Queries на основе пользовательской темы и настроек специальных возможностей в операционной системе — например, с помощью @media (prefers-color-scheme: dark) (см. prefers-color-scheme ) вы можете проверить, тема операционной системы пользователя в настоящее время находится в темном режиме, и используйте его для соответствующей настройки темы веб-сайтов.
Запрос также доступен..
Вопросы по теме 'media-queries'
Как определить ориентацию устройства с помощью медиа-запросов CSS?
В JavaScript режим ориентации можно определить с помощью:
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
Однако есть ли способ определить ориентацию только с помощью CSS?
Например....
193396 просмотров
schedule
01.07.2023
Насколько медленны медиа-запросы CSS?
Когда я упорядочиваю свой CSS, мне нравится сохранять связанные стили (стили заголовков находятся в одном разделе, стили нижнего колонтитула — в одном месте и т. д.) (извините, сторонники OOCSS).
Недавно я экспериментировал с медиа-запросами для...
1782 просмотров
schedule
25.03.2023
Как отлаживать css внутри различных медиа-запросов с помощью инструментов Firebug и Chrome Developer?
Как отлаживать css для ориентации:портрет в инструментах разработчика Chrome?
Все, что я пишу внутри (orientation:portrait) , нельзя редактировать на лету с помощью инструментов Firebug и Chrome Developer. Он всегда показывает обычные свойства....
11210 просмотров
schedule
02.02.2023
Ориентация всех мониторов настольных компьютеров/ноутбуков похожа на альбомную ориентацию на таких устройствах, как iPad?
Ориентация всех мониторов настольных компьютеров/ноутбуков похожа на альбомную ориентацию на таких устройствах, как iPad?
Есть ли разница между?
body {background:red}
@media only screen and (orientation : landscape) {
body...
4749 просмотров
schedule
10.08.2022
Лучший способ использовать медиазапросы для мобильных устройств
Я знаю, что такое медиа-запросы и почему они используются, но я не уверен, как лучше всего разработать с их помощью мобильный сайт.
Пример: у меня есть mysite.com, на котором есть таблица стилей со всеми необходимыми стилями (скажем, это довольно...
8694 просмотров
schedule
03.05.2023
Самый эффективный способ обслуживания различных веб-устройств?
Люди, голосующие за закрытие как неконструктивное , прочтите, пожалуйста, полностью. Конкретные вопросы в конце. Ищем реальные примеры и подходы.
Контекст
При большом количестве устройств, таких как смартфоны и планшеты, которые все чаще...
1153 просмотров
schedule
06.12.2023
Медиа-запрос, чтобы отличить рабочий стол от iPad в ландшафтном режиме
Я создаю сайт с адаптивным дизайном. Мне нужно различать макет между планшетом в ландшафтном режиме и рабочим столом с медиа-запросами. Это медиа-запросы прямо сейчас:
<link href="base.css" rel="stylesheet"/>
<link href="desktop.css"...
9501 просмотров
schedule
16.10.2022
Chrome + css3: ошибка масштабирования медиа-запроса
Очень приятной особенностью создания сайта процентной ширины с медиа-запросами является то, что при увеличении масштаба сайт всегда будет занимать 100% области просмотра, соблюдая медиа-запросы даже при увеличении.
Полный файл CSS см. на...
2963 просмотров
schedule
25.10.2022
page-break-inside: избегайте - не работает в Chrome
В основном я использую Chrome и, возможно, впервые столкнулся с такой проблемой. Он работает в IE, не уверен, что в других браузерах, но не в Chrome. Есть идеи или советы?
@media print
{
table {page-break-inside:avoid}
}
также при простом...
3943 просмотров
schedule
22.06.2022
Дисплей: нет при повороте смартфона
Сейчас я делаю сайт для мобильных устройств. В style.css я получил
#mobilepicture {
display: none;
}
#stockpicture {
float: left;
position: relative;
top: -65px;
left: 100px;
}
Это часть mobile.css:
#stockpicture {
display:...
1745 просмотров
schedule
15.05.2022
Сбросить ширину и высоту изображения, установленные через css
Я пытаюсь создать гибкую верстку в html, содержащую изображения. На данный момент я поддерживаю 2 размера макета. Макет по умолчанию используется для отображения сайта шириной 1000 пикселей. Если экран достаточно широкий (шире 1200 пикселей), я...
22448 просмотров
schedule
31.07.2022
jQuery Mobile — Замена изображения CSS Retina
У меня есть мобильный сайт с jQuery Mobile. Я хочу иметь стандартные изображения для устройств без сетчатки (устройства без высокой плотности пикселей), но хочу, чтобы эти изображения были заменены изображениями сетчатки (с высокой плотностью...
4323 просмотров
schedule
09.08.2023
Как превратить комбинированный медиа-запрос в sass из css?
В настоящее время у меня есть это:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {...
273 просмотров
schedule
14.05.2022
Медиа-запросы и соотношение пикселей устройства
Я занимаюсь редизайном своего веб-сайта и решил попробовать адаптивную верстку. Я новичок в медиа-запросах CSS3 и не могу понять, как заставить сайт вести себя так, как задумано на моем смартфоне.
В настоящее время на странице есть этот метатег...
7844 просмотров
schedule
20.05.2022
Медиа-запросы, начальная загрузка и css3-mediaqueries-js — является ли тип носителя (экран, карманный компьютер и т. д.) необязательным?
Я начал новый адаптивный веб-проект, основанный на фреймворке начальной загрузки Twitter (одновременно приступая к кривой обучения LESS), и я столкнулся с проблемой с IE и медиа-запросами. Поскольку IE7 и 8 не поддерживают медиа-запросы, я взял копию...
13038 просмотров
schedule
03.05.2022
css media query для обработки новых мобильных телефонов с высоким разрешением, игнорируя при этом планшеты
Согласно моим исследованиям; новые смартфоны с портретным разрешением до 800 пикселей планшеты с минимальным портретным разрешением 600 пикселей
Теперь я пытаюсь использовать медиа-запросы для рендеринга мобильных css на портативные устройства,...
7985 просмотров
schedule
27.04.2022
Почему мой медиа-запрос CSS игнорируется или переопределяется?
Это сводит меня с ума! Я просмотрел несколько вопросов в Stackoverflow и увидел, что элемент ID имеет приоритет над элементом класса (это полезно знать, но у меня такое чувство, что это не моя проблема). Это мое меню НАВИГАЦИЯ, с которым я борюсь....
30094 просмотров
schedule
27.01.2023
мобильная таблица стилей не работает на iPhone
Я только что написал несколько правил, чтобы мобильная версия моего сайта отображалась на смартфонах.
Мобильные правила включены в нижнюю часть таблицы стилей по умолчанию ( http://www.flapane.com/style.css ), используя "@media".
@media only...
1675 просмотров
schedule
23.06.2022
Отзывчивый макет Twitter Bootstrap не работает в IE8 или ниже
Я разработал сайт с использованием twitter bootstrap, и кажется, что адаптивная часть макета не работает во всех браузерах IE, начиная с IE8 и ниже. Это просто не поддерживается для этих браузеров?
76901 просмотров
schedule
29.04.2022
Медиа-запросы для экранов настольных компьютеров и мобильных устройств
У меня есть этот медиа-запрос:
@media only screen
and (max-width : 320px),
only screen
and (max-device-width : 320px)
and (min-device-pixel-ratio : 2),
only screen
and (max-device-width : 320px)
and (-webkit-min-device-pixel-ratio : 2),
only...
1091 просмотров
schedule
03.05.2023
