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

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

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

Prakop

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

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

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

Ответ написан более трёх лет назад
Нравится 3 2 комментария
booogabooo @booogabooo Автор вопроса
медиа работают на половину. ширина учитывается, а высота нет

knitevision1

Владик Лимонадик @knitevision1
booogabooo: что дев тулзы говорят? скрин мб какой?

seregazolotaryow64

Сергей Золотарёв @seregazolotaryow64
IT Специалист и самоучка

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

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

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

Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

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

php

  • PHP
  • +3 ещё

Почему Telegram не принимает html при добавлении в sendMessage parse_mode=HTML?

  • 1 подписчик
  • 47 минут назад
  • 17 просмотров

Медиа-запросы не работают

Здравствуйте! Помогите, пожалуйста, советом: пытаюсь с помощью медиа-запросов отрегулировать ширину шапки и контента, но не выходит. Мне нужно, чтобы если экран устройства менее 1024 px, поля не показывались, а шапка и контент занимали 100% экрана, на широкоэкранных мониторах чтобы шапка и контент занимали 53%, остальное, соответственно, поля. Прописывала, вроде бы, правильно:

@media screen and (max-width: 1024px) < #main < width: 100%; margin: 0; padding: 0; >#header < width: 100%; margin: 0; padding: 0; >> #header < background-image: url(../images/header.jpg); width: 53%; height: 239px; background-repeat: no-repeat; padding: 0px; margin: auto; border: 1px solid #CCC; >#main

Проверяла неоднократно на устройствах с разрешением менее 1024 px — правила не работают, все равно появляются поля и контент с шапкой занимают 53 %, отчего получается тоненькая полоска (. Что я не так делаю? Может, медиа-запросы не в файл стилей нужно записывать? Как еще можно осуществить задумку? Пробовала также max-device-width, все равно не работает.

Не работает media запрос.

Возникла ошибка при адаптации сайта. В панели разработчика media (max-width 1200px) отоброжается , но перечеркнуто .Пробовал во всех блоках.

      Pulse      
Официальный представитель Garmin, Polar, Suunto
+7 (499) 922-89-74

Подбор пульсометра

с учётом Вашего уровня подготовки

timerВремя подбора: 10 минут
hand-cartБесплатная доставка
messagesОтветим на все вопросы
/* style */ @import 'base/variables'; @import 'base/media'; * < font-family: 'Museo Sans Cyrl', sans-serif; >.container < max-width: 950px; margin: 0 auto; >@import 'blocks/promo'; @import 'blocks/header.scss'; @import 'blocks/buttons'; @import 'blocks/advantages'; @import 'blocks/titles'; @import 'blocks/consultation'; @import 'blocks/forms'; @import 'blocks/carousel'; @import 'blocks/catalog'; @import 'blocks/feed'; /* _promo */ .promo < min-height: 650px; padding: 21px 0 93px 0; background: url("../img/big/bg1.png") center (center/cover) no-repeat; &__wrapper < display: flex; flex-direction: column; align-items: flex-end; margin-top: 90px; /* _media */ @media (max-width: 1200px) < .promo < &__wrapper < align-items: center; >>

Алексей Нобелев
2 years ago

Поставил к align-items: centre !important;. И все заработало. Но вроде можно без !important. Вопрос, как?

Алексей Нобелев
2 years ago

!important для ленивых кому неохота свои ошибки искать

student_kAR68Gv3
2 years ago

Поставь align-items:
start, end
justify-content:
center, space betwen,space evenly.

и ищи золотую середину

student_kAR68Gv3
2 years ago

У меня flex-direction: column;. Надо выравнить по центру при разрешении 1200.justify-content не выравнивает колонку. Все что не делаю перечеркнуто. Я уже 3 день пытаюсь. Не могу сделать. Кроме !important не чего не работает. Какие еще есть варианты?

Алексей Нобелев
2 years ago

.justify-content выравнивает по бокам,проще говоря

если .justify-content column, в центре от низа и верха

чтобы понять, поверни экран на 90 град.,

я, для себя чтоб понимать, сделал картинки могу скинуть

student_kAR68Gv3
2 years ago

Вообщем решил проблему. Оказывается в Style нужно @import ‘media’ писать в самом низу. Чтобы не перебивало.

Медиа-запросы

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Табл. 1. Типы носителей и их описание

Тип Описание
all Все типы. Это значение используется по умолчанию.
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Смартфоны и аналогичные им аппараты.
print Принтеры и другие печатающие устройства.
projection Проекторы.
screen Экран монитора.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color)

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld)

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

@media not all and (color)

следует понимать как

@media not (all and (color))
@media (not all) and (color)

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld)

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px)

Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.

Медиа-функции

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px , наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) < /* Для цветных экранов */ body < background: #fc0; >> @media screen and (min-color:3) < /* Минимум 512 цветов */ body < background: #ccc; >>

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256)

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9)

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5 CSS3 IE Cr Op Sa Fx

    Ширина макета    
Диабаз, формируя аномальные геохимические ряды, сменяет известняк, образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.

grid

Тип носителя: all
Значение: нет

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5 CSS3 IE Cr Op Sa Fx

    Стиль для бабушкофона   

Привет! Как дела? Как сажа бела?

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) < body < font-family: Times, 'Times New Roman', serif; > 
h1, h2, p < color: black; >> @media print and (color) < body < font-family: Arial, Verdana, sans-serif; >
h1, h2, p < color: #556b2f; >>

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) < #logo < background: url(logo1.png) no-repeat; >> @media screen and (orientation: portrait) < #logo < background: url(logo2.png) no-repeat; >>

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi)

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5 CSS3 IE Cr Op Sa Fx

    Ширина страницы   

Пока магма остается в камере, мусковит сингонально поднимает шток, в то время как значения максимумов изменяются в широких пределах.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *