Публикации по теме 'media-queries'
Измените форму своего сайта с помощью адаптивного дизайна
Что такое адаптивный веб-дизайн?
Адаптивный веб-дизайн — это способ создавать веб-сайты, которые хорошо выглядят и хорошо работают на любом устройстве, от настольных компьютеров до смартфонов. Другими словами, адаптивный веб-сайт автоматически настраивает свой макет, контент и элементы для обеспечения оптимального просмотра независимо от того, просматривает ли пользователь на настольном компьютере, планшете или смартфоне.
Представьте себе веб-сайт, который визуально привлекателен и..
Создание адаптивной панели навигации с помощью HTML, CSS и JavaScript
Адаптивная панель навигации является важным элементом любого современного веб-сайта, поскольку позволяет пользователям легко перемещаться по сайту на разных устройствах. В этой статье мы рассмотрим, как создать адаптивную панель навигации с помощью HTML, CSS и JavaScript.
Для начала мы создадим структуру HTML для панели навигации. Мы будем использовать элемент nav для переноса элементов навигации и элемент ul для хранения навигационных ссылок:
<nav>
<ul>..
Использование медиа-запросов для учета различных экранов просмотра устройств
В последнее время я занимаюсь созданием личного веб-сайта для себя, чтобы продемонстрировать свои проекты и навыки. Сайт написан на Gatsby JS, и я получил массу удовольствия, используя начальный шаблон, чтобы выполнить задачу очень быстро, и все выглядело великолепно…. хорошо большой для моих ужасных глаз. Тем не менее, я столкнулся с интересной проблемой, которую решил изучить и найти решение. После создания и развертывания первоначальной сборки в моем домене я заметил, что мое..
Отзывчивость в ответ на медиа-запросы
В этой статье я расскажу о том, как добиться отзывчивости при создании приложения для реагирования. Мы будем использовать медиа-запросы в нашем css. Это краткая статья, так что давайте погрузимся прямо в . Создайте свое приложение для реагирования, я назвал свое приложение responsive-react
Теперь, когда мы создали приложение для реагирования, в компоненте приложения создайте текст h1. Мы собираемся сделать текст заголовка адаптивным.
Теперь мы хотим, чтобы размер шрифта и цвет..
Вопросы по теме 'media-queries'
CSS @media проблемы печати с background-color;
Я новичок в этой компании, и у нас есть продукт, который использует много сотен CSS. Я пытаюсь создать для нашего приложения таблицу стилей для печати, но у меня проблемы с background-color в @media print .
@media print {...
244079 просмотров
schedule
05.09.2022
Есть ли версия YUI Compressor, которая правильно работает с медиа-запросами?
YUI Compressor имеет известную ошибку, из-за которой некоторые медиа-запросы, в том числе те, которые используются для подачи стилей на устройства iOS и Android (например, @media screen and (max-device-width: 480px) {...} ), ломаются при сжатии,...
4628 просмотров
schedule
18.09.2022
Что означает @media screen и (max-width: 1024px) в CSS?
Я нашел этот фрагмент кода в унаследованном мной CSS-файле, но не могу понять из него:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
В частности, что происходит в первой строке?
463599 просмотров
schedule
24.01.2024
CSS, определяющий активный медиа-запрос
В Javascript есть прямой способ (не включающий синтаксический анализ кода css), чтобы определить, какой медиа-запрос активен?
Например, у меня есть два запроса:
@media screen and (max-width:800px)
@media screen and (min-width:801px)
без...
4683 просмотров
schedule
25.08.2022
CSS Условный вопрос @Import
У меня есть файл HTML со следующим кодом:
<html>
<head>
<LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
</head>
<body>
<span class="ipad_text">DESKTOP RED; iPad...
3386 просмотров
schedule
17.04.2023
Медиа-запросы ведут себя не так, как ожидалось, на Android
У меня есть 4 медиа-запроса. 1-я, 3-я и 4-я работают, а 2-я не активируется.
Почему 480x720 (второй медиа-запрос) по умолчанию соответствует первому медиа-запросу?
@media screen and (max-width: 320px) and (orientation: portrait) {...
36940 просмотров
schedule
30.03.2023
Запрос мультимедиа CSS на iPhone
Я пытаюсь использовать медиа-запрос CSS, специально предназначенный для iPhone.
Это работает, когда я использую обычную ссылку rel:
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
Однако, когда я пробую этот...
14947 просмотров
schedule
06.06.2022
Медиа-запросы не работают в браузере Android
Я пытаюсь разработать веб-приложение, которое применяет соответствующую таблицу стилей в зависимости от устройства (и его ориентации).
Всего у меня есть 5 медиа-запросов:
//for mobile phones in portrait mode
<link rel="stylesheet" media="all...
3029 просмотров
schedule
02.12.2023
Проекционный медиа-запрос: поддержка браузера и обходные пути?
Я пытаюсь применить стили к странице только тогда, когда страница проецируется на стену (с помощью проектора, когда кто-то проводит презентацию). На данный момент я могу получить это только в Опере в полноэкранном режиме.
Есть ли способ заставить...
2976 просмотров
schedule
15.02.2023
В чем разница между max-device-width и max-width для мобильного Интернета?
Мне нужно разработать несколько html-страниц для телефонов iphone / android, но в чем разница между max-device-width и max-width ? Мне нужно использовать разные CSS для разных размеров экрана.
@media all and (max-device-width: 400px)
@media...
131498 просмотров
schedule
11.10.2023
Получить ширину устройства в javascript
Есть ли способ получить ширину устройства пользователя, а не ширину области просмотра, с помощью JavaScript?
Медиа-запросы CSS предлагают это, как я могу сказать
@media screen and (max-width:640px) {
/* ... */
}
а также
@media...
239465 просмотров
schedule
09.05.2023
В чем разница между медиа-запросами max-width и max-device-width?
Возможный дубликат: В чем разница между max-device-width и max-width для мобильного Интернета?
Например, этот сайт:
http://8faces.com/ использует max-width .
В этом руководстве используется максимальная ширина устройства ....
6342 просмотров
schedule
21.10.2023
Как определить наличие медиа-запросов с помощью Modernizr
Я пытаюсь определить, присутствуют ли медиа-запросы с помощью Modernizr 2, а затем загружаю в response.js, если это необходимо.
Я поместил это в свой файл script.js...
Modernizr.load({
test: Modernizr.mq,
yep : '',
nope:...
16246 просмотров
schedule
02.01.2024
Работают ли медиа-запросы для всех смартфонов?
Я пытаюсь разработать мобильное приложение, которое должно работать на всех смартфонах, планшетах и некоторых телефонах. Раньше я использовал медиа-запросы CSS3 и тестировал их на Android и iOS, где это работает как шарм. Но как насчет Nokia и...
2868 просмотров
schedule
20.04.2023
Как эффективно использовать бескаркасную сетку?
Я начинаю создавать веб-сайт, который также подходит для мобильных устройств. Так что я также начинаю изучать медиа-запросы и различные сетки. Я просмотрел все «основные игроки», такие как Inuit.css, семантическая сетка и т. д., и обнаружил, что...
7360 просмотров
schedule
14.05.2023
Проблемы с переключением с книжной на альбомную с помощью медиа-запросов
В настоящее время я начинаю использовать адаптивный подход к своим сайтам. Я нашел http://fluidbaselinegrid.com/ лучшим шаблоном для этого. Но с каждым шаблоном или сеткой, которые я пробовал, я не могу заставить iPhone или iPad распознавать...
4212 просмотров
schedule
10.11.2022
CSS: альтернативное фоновое изображение для мобильного сайта?
Я работаю над адаптивным веб-сайтом, и я поигрался с полными фонами изображений - он выглядит отлично, когда размер веб-сайта изменяется до размера iPad и выше, но как только он изменяется ниже порога 480 пикселей (также известного как мобильная...
2560 просмотров
schedule
02.08.2023
адаптивный веб-дизайн для n столбцов портлетов произвольной высоты
Кратко:
Как разместить N столбцов портлетов произвольной высоты в CSS, чтобы при изменении размера браузера количество столбцов уменьшалось (используя @media (min-width:)) и портлеты по-прежнему хорошо сидели вместе на странице с нет пробелов....
1240 просмотров
schedule
30.05.2024
Преодоление свойств, определенных JavaScript, с использованием медиа-запросов
Я устанавливаю высоту и ширину DIV, вычисляя свойства window.height и window.width, а затем присваивая значения DIV. Теперь DIV занимает всю область просмотра браузера.
Теперь я хочу переопределить эти размеры с помощью медиа-запросов, когда...
82 просмотров
schedule
16.04.2024
проблемы с медиа-запросом iphone/ipad
У меня была забота. Я собираю небольшой сайт, и по какой-то причине мои медиа-запросы iphone и ipad сталкиваются. Iphone улавливает стили Ipad, но не наоборот. Поэтому я хотел выложить то, что я использую, и посмотреть, может ли кто-нибудь помочь....
2803 просмотров
schedule
01.10.2022
