Css media запросы не работают

Почему мои медиа-запросы CSS3 не работают?

В styles.css, я использую медиа-запросы, оба из которых используют вариант:

/*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) < /*--[ Mobile styles go here]---------------------------*/ >

При изменении размера окна сайты изменяются в соответствии с макетом, который я хочу в обычном браузере (Safari, Firefox), однако мобильный план не отображается вообще на телефоне. Вместо этого я просто вижу CSS по умолчанию.

Может ли кто-нибудь указать мне в правильном направлении?

ОТВЕТЫ

Ответ 1

Все три из них были полезными советами, но, похоже, мне нужно было добавить метатег:

Теперь, похоже, все работает на Android (2.2) и iPhone.

Ответ 2

Не забывайте, что стандартные объявления css выше не будут работать или в запросе на мультимедиа.

.edcar_letter < font-size:180px; >@media screen and (max-width: 350px) < .edcar_letter< font-size:120px; >> 

Ответ 3

Я подозреваю, что ключевое слово only может быть проблемой здесь. У меня нет проблем с использованием медиа-запросов, подобных этому:

@media screen and (max-width: 480px)

Ответ 4

Я использовал bootstrap на пресс-сайте, но он не работал на IE8, я использовал javascript css3-mediaqueries.js, но все еще не работал. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку вашего медиа-запроса в css

css Линия связи так же проста, как и выше.

Ответ 5

Сегодня у меня была схожая ситуация. Запрос мультимедиа не работал. Через некоторое время я обнаружил, что пространство после «и» отсутствует. Правильный медиа-запрос должен выглядеть следующим образом:

@media screen and (max-width: 1024px) <> 

Ответ 6

Я скопировал bootstrap 4 медиа-запроса прямо из своих документов, и каждый запрос помечен тем же самым комментарием комментариев стиля javascript // !

Кроме того, текстовый редактор IntelliJ позволил мне прокомментировать определенные строки css в файле LESS, но автоматически использовал // . Это не бесплатное ПО, поэтому я решил, что все правильно. Там есть меню предпочтений для исправления этого поведения.

Кроме того, проверьте ваш css с надежным онлайн-валидатором. Здесь один из W3

Ответ 7

@media all and (max-width:320px)and(min-width:0px) < #container < width: 100%; >sty < height: 50%; width: 100%; text-align: center; margin: 0; >> .username

Ответ 8

Я использую несколько методов в зависимости. В той же таблице стилей я использую: @media (max-width: 450px), или для отдельных, убедитесь, что у вас есть ссылка в заголовке правильно. Я взглянул на ваше исправление, и у вас запутался массив ссылок на css. Он действует так же, как вы говорите также о желании HTC S.

Ответ 9

Для меня я указал max-height вместо max-width .

Если это вы, поменяйте его!

 @media screen and (max-width: 350px) < // Not max-height .letter< font-size:20px; >> 

Ответ 10

Это также может произойти, если уровень масштабирования браузера не является правильным. Масштаб окна вашего браузера должен быть 100%. В Chrome используйте Ctrl + 0 чтобы сбросить уровень масштабирования.

Ответ 11

Я тоже недавно столкнулся с этой проблемой, и позже узнал, что это потому, что я не поставил пробел между and и ( . Это была ошибка

@media screen and(max-width:768px)

Затем я изменил это на это, чтобы исправить это

@media screen and (max-width:768px)

Ответ 12

Бросив еще один ответ в кольцо. Если вы пытаетесь использовать CSS-переменные, он просто потерпит неудачу.

@media screen and (max-device-width: var(--breakpoint-small)) <> 

CSS-переменные не работают в медиа-запросах (по замыслу).

Ответ 13

Странная причина, которую я никогда раньше не видел: если вы используете селектор «родитель> потомок» вне медиазапроса (в Firefox 69), это может нарушить медиазапрос. Я не уверен, почему это происходит, но для моего сценария это не сработало.

Но добавление родителя, чтобы он соответствовал другому CSS дальше по странице, это работает.

Похоже, указание родителя не должно иметь значения, поскольку идентификатор очень специфичен и не должно быть никакой двусмысленности. Может быть, это ошибка в Firefox?

Источник

Почему не работают медиа запросы?

как правило такое сложности возникают, когда не учитывается специфичность такого обращения к селекторам. попробуй закинуть эти свйоства в конец сss файла.

• проверить специфичность (выше)
• посмотреть в браузере в фаербаге, что происходит и что применяется к элементам в зависимости от обстоятельств
• попробовать протестировать отдельные простые куски кода и посмотреть работает ли хоть чтото. Например так:

@media all and (min-width: 640px) and (max-width: 734px) < * < background: red; >>

Пробовал применять resolution и device-width и к ним прикрепил масштабирование всего тела. Применял @media screen и @media all и подключил тег viewport . Тестирую на нетбуке и ничего не работает.

Бывает, когда пишешь код css через препроцессор Sass, когда какой-то элемент был не принят препроцессором, по причине ошибки в написании, последующие изменения в код не вносятся, до исправления предыдущей ошибки. Поэтому, когда пишешь media — команда не срабатывает, так как была совершена ошибка в коде до этого (система кривая, но так уж она работает). Советую воспользоваться препроцессором Prepros, он после каждого изменения указывает подтверждения правильности кода, либо указывает на ошибку.

Войдите, чтобы написать ответ

Почему не подключается файл JS к файлу html?

Источник

[Fixed] @media query in CSS not working issue

CSS media queries are an incredibly useful tool for targeting specific devices, resolutions, and other factors when creating a website.

This is good for overall responsive design.

However, when they don’t work, it can be incredibly frustrating.

Steps to fix CSS media queries issues include the following:

1.Check your media query syntax

The most common cause of media queries not working is incorrect syntax. Make sure that you’ve got all the correct characters in the correct order. It’s also important to make sure that you’re using the correct syntax for the version of CSS you’re using.

2. Check to see if you are using the right break points It’s also important to make sure that we are using the right break points (and orientation) for the devices we want to test. For example, mobile phones such as iPhones will have lower breakpoints.

3. Make Sure the Media Queries Are in the Correct Order

The order of your media queries is also important. Generally speaking, you want to put the most specific media query first and the most general one last in your CSS file.

4. Check for Conflicting Styles — Check you dont have conflicting breakpoints or not logical operators

Check your media query syntax

CSS media query follows the syntax of having starting with the @media at-rule and then followed by media type (screen, print, all) and a bunch of media features:

 So in the above example, we can see that the media type is screen and the media features are min-width: 30em and orientation:landscape . Just means that the CSS that this media query is targeting should be for screens and the devices with min-width of 30em and orientation mode.

• Spelling mistakes — since its a fair chunk of code to type out, check that you have the right spelling. Tools like VSCode can help with this.
• Using commas means different things. Take the following example:

The above means that we are declaring two different media queries. If we want to target min-width of 600px and max-width of 601px, we should re-write it as follows:

Check to see if you are using the right break points

Our website can be accessed on a wide range of devices (tablets, phones, desktop), having break points we can define specifically how our website looks on each.

When doing responsive first design (design for mobile first and then move up), it is prefered to follow the below set of breakpoints as a general rule.

(Note: the values are in pixels)

Make Sure the Media Queries Are in the Correct Order

Make sure that the standard CSS declarations are above the @media query definition. Take the following example:

If we have the .test class below our @media query, then it will not apply the font-size:180px property.

Check for Conflicting Styles

Media queries allows you to build up logical operators (using things like and and not ). This can lead to confusion and conflicts within your styles.

An example is specifying conflicting widths:

As another example, when using the not logical operator, it will apply to the whole media query and not individual attributes. Lets say we want to target all media types (screen, print, et) and only for monochrome browsers:

 Now if we add a not operator, it will apply to the whole media query (not individual attributes):

Are you using the HTML viewport meta tag?

Typically, not all devices have the same width, so in our HTML we need to specify the following meta tag:

 In the above, we just specify the width to adhere to the device-width and the zoom ( initial-scale ) to be the default of 1.

Summary

Hopefully, these tips will help you to get your media queries working properly. Remember to double-check your syntax, make sure that there are no conflicting CSS styles (min and max width breakpoints), check that you are using the HTML meta viewport tag, check for correct breakpoints. Good luck!

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

не работает @media в css

1.работаю с Notepad++ и у меня не отсвечиваются правила и выглядят как обычный текст. остальной синтаксис подсвечивается.
2.правило не активно в любом устройстве при любом разрешении экрана.
что не так? может я чео нить еще не знаю. может надо подключать дополнительные файлы? я уже устал искать и редактить код. понимаю что тупые вопросы но все ответы перепробовал и ничего.

Не работает команда @media в CSS
Добрый день. Подскажите пожалуйста где ошибка. Цель, хочу чтобы при просмотре сайта через.

Разница между @media и атрибутом media в CSS
Доброго времени суток! Очень каноничный ламер, буквально 2 дня назад начал читать про разметку.

Media screen css
Ребят, подскажите. Как сделать, если media screen = значению, которому указывал, он загружал.

Media запрос CSS
Всем привет! Делаю адаптивную версиб сайта (под мобилы), возникла проблемма. Основной CSS .

@media only screen and (max-width: 600px) { /* правила CSS */ }

увы и такая запись не работает.

Добавлено через 1 минуту
evikza, увы и этот вариант не проходит. пробовал.

Сообщение было отмечено Fedor92 как решение

Решение

vlad_fom, ну как же не работает?

С вашим @media запросом, правила работать не будут:

@media only screen and(max-device-width:600px)

Если сделать как я показал, все отлично работает

meta name="viewport" content="width=device-width, initial-scale=1" />

evikza, Хочу выразить вам огромную благодарность за выложенный ответ! действительно все так просто. жаль что я не заметил сего в других ответах. весь вопрос на самом деле заключался в пробеле между скобкой и словом and. возможно именно для этого приходится задавать столь глупые вопросы. ведь в учебниках забывают указать все что только можно. ну что же я поехал дальше. в переди лучший в мире сайт по безопасности в сети ))))))))) Путь далек) Всего хорошего!

Сообщение от evikza

vlad_fom, ну как же не работает?

С вашим @media запросом, правила работать не будут:

@media only screen and(max-device-width:600px)

Если сделать как я показал, все отлично работает

meta name="viewport" content="width=device-width, initial-scale=1" />

Здравствуйте, ваше решение с добавление тега meta. лично мне не помогло, при уменьшении ширины экрана с правой стороны страницы начинает появляться белый пустой прямоугольник

Css media queries
Добрый день.Помогите пожалуйста разобраться.Есть ли причина по которой в css нужно использовать как.

Media css не подключаются к android
Уже не знаю в чем проблема, в хроме в панели разработчика проверил, все работает, но через телефон.

CSS и принтер (@media правила)
Здравствуйте. У меня такой вопрос: необходимо сделать страничку, работающую с @media правилами, то.

@Media CSS Как убрать блок из header?
Всем привет. Возникла проблема с сайтом . У меня в шапке есть логотип,"поддержка","жалоба",и.

Источник