media-queries- все статьи тега
CSS Media Query и Javascript/jQuery не совпадают
В моем CSS у меня есть медиа-запрос, такой как: @media (min-width: 800px) { /* styles */ } А затем в моем jQuery я нацеливаюсь на ширину окна и выполняю некоторые действия. Edit: согласно ответам ниже, я изменил эту функцию, но мои JS и CSS все еще не выровнялись. Проблема была исправлена с помощью функции Modernizr, как указано в принятом ответе. $(window).resize(function() { var viewportWidth = $(window).width(); if (viewportWidth >= 800) { // do something } }); ...
Меньше, медиа-запросы и производительность
Я недавно начал работать с LessCSS, и у меня был довольно большой успех в отношении того, насколько чистым и читаемым стал мой CSS. Однако я не думаю, что использую меньшее в полной мере. Я сейчас в процессе кодирования моего первого полностью отзывчивого сайта, используя меньше, и я обеспокоен производительностью и скоростью. Следует отметить, что я не придерживаюсь методологии "точки останова" - я масштабирую вещи вверх и вниз, пока они не сломаются, а затем пишу CSS, чтобы исправить их; ч ...
@media print не работает должным образом в Chrome
Нашли/прочитали / попробовали много ответов на этот вопрос, так что извините, если решение уже было опубликовано, но Chrome не отображает стили печати правильно со многими элементами отсутствует (но не все). Вот как все устроено. 1. SETUP Стили печати задаются в конце основного css файла с помощью @media print На ссылке нет атрибута media, который загружает css-файл Мы объявляем !important на всех стили печати Стили печати переопределяют стили экрана там, где это необходимо (т. е.@me ...
Запросы css media: max-width или max-height
при написании медиа-запроса CSS, есть ли способ указать несколько условий с логикой "или"? Я пытаюсь сделать что-то вроде этого: /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... } ...
Что означает @media screen и (max-width: 1024px) в CSS?
Я нашел этот фрагмент кода в файле CSS, который я унаследовал, но я не могу понять его: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } в частности, что происходит на первой строке? ...
Запрос мультимедиа для определения, является ли устройство сенсорным экраном
каков самый безопасный способ, используя медиа-запросы, чтобы что-то произошло, когда не на сенсорном устройстве? Если нет никакого способа, вы предлагаете использовать решение JavaScript, такое как !window.Touch или Modernizr? ...
iPhone 6 и 6 Plus медиа-запросы
кто-нибудь знает конкретные размеры экрана для целевых медиа-запросов для iPhone 6 и 6 Plus? кроме того, размеры значков и заставки? ...
Переключение на их основе медиа-запросов
теперь, когда WebKit ошибка масштабирования страницы была основные, каковы основные причины использования запросов мультимедиа на основе em, а не запросов мультимедиа на основе пикселей? награда Я добавляю щедрость к моему вопросу, потому что так много выдающихся CSSрамкии webразработчики используйте em-запросы на основе мультимедиа, которые, я убежден, должны быть хорошими причина(ы) для этого. единственное преимущество, о котором я знаю, это то, что если пользователь изменит размер шрифта ...
CSS media query для таргетинга только на iPad и iPad?
Привет я работаю с несколькими планшетными устройствами, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad и так далее. iPad-1024 x 768 LG Pad-1280 x 768 Galaxy Tab-1280 x 800 Я хочу, чтобы целевой iPad только с помощью CSS3 media query. Поскольку ширина устройства LG и iPad одинакова 768px-у меня возникли проблемы с разделением каждого устройства. Я пробовал следовать, чтобы отделить, но, похоже, нет рабочий: @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orien ...
Достижение минимальной ширины с метатегом viewport
Я хотел бы, чтобы моя веб-страница ширина просмотра равной Майкоп пока Майкоп > 450px, или 450px в противном случае (мой макет динамически масштабируется, но не выглядит хорошо ниже 450px в ширину). следующие два мета-тега хорошо работают на планшетах, где ширина устройства > 450px: <!-- uses device width --> <meta name="viewport" content="width=device-width" /> <!-- use of initial-scale means width param is treated as min-width --> <meta name="viewport" content="wi ...
Как я могу обнаружить Internet Explorer (IE) и Microsoft Edge с помощью JavaScript?
Я много смотрел вокруг, и я понимаю, что есть много способов обнаружить internet explorer. моя проблема заключается в следующем: у меня есть область в моем HTML-документе, которая при нажатии вызывает функцию JavaScript, несовместимую с internet explorer любого рода. Я хочу определить, используется ли IE, и если да, установите переменную в true. проблема в том, что я пишу свой код из Notepad++, и когда я запускаю HTML-код в браузере, ни один из методов для обнаружения работы IE. Я думаю, что ...
Собственные переменные CSS не работают в медиа-запросах
Я пытаюсь использовать переменные CSS в медиа-запросе, и это не работает. :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { } ...