Медиа-запрос не работает для рабочего стола

0

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

Мое разрешение для рабочего стола - 1440 x 900. Следовательно, мой медиа-запрос css для рабочего стола выглядит следующим образом:

@media (max-width: 1440px) {

  #loginpage {
    position:relative;
    margin-top:15%;
  }

  #headerbodyadmin {
    position:relative;
    margin-top:20%;
  }

}

Я попытался использовать этот метод.

@media only screen and (max-width : 1440px){
}

К сожалению, он не работает. Я проверил разное учебное пособие по мультимедийным запросам, и, похоже, это правильный способ реализовать css для моего рабочего стола с разрешением 1440x900.

Могу ли я знать, сделал ли я что-то неправильно здесь?

  • 0
    Разве вы не должны просто делать запросы для мобильных устройств и планшетов, и тогда по умолчанию будет рабочий стол? Desktop не нуждается в запросе.
  • 0
    Что вы имеете в виду, что он не работает? Рабочая Демо
Показать ещё 4 комментария
Теги:

5 ответов

2
Лучший ответ

Попробуйте добавить один пиксель к максимальной ширине, @media (max-width: 1441px)

  • 0
    черт. вы правы. ты должен плюс 1. спасибо :)
0

Я проверил код, и он отлично работает, убедитесь, что вы указали id на странице html.

Проверьте этот URL: http://jsfiddle.net/Ravichand/8kznk/

@media  (max-width: 1440px) {

#loginpage {
position:relative;
margin-top:15%;
color:red;
}

#headerbodyadmin {
position:relative;
margin-top:20%;
color:skyblue;
}
}
0

Решение 01: Вместо max width. вы можете использовать min-width

подобно

/*Sizes above 1024*/
@media (min-width: 1024px) {

}

Решение 02: Или вы можете попробовать добавить +1 к своей ширине

подобно

/*width 1441 to avoid any other conflict */
@media (max-width: 1441px) {

}
0

Я проверил это и это работает, здесь вы можете найти пример

http://jsfiddle.net/7VVsA/

@media (max-width: 1440px) {

  #loginpage {
    position:relative;
    margin-top:15%;
    background:red;
  }

  #headerbodyadmin {
    position:relative;
    margin-top:20%;
    background:yellow;
  }

}
0

Атрибут width и height описывает длину порта представления, а не разрешение экрана device-width как device-width device-height. Если вы используете атрибут width, возможно, что рассматриваемое значение меньше ширины разрешения экрана, потому что есть граница вокруг окна или полосы прокрутки. Браузеры на мобильных устройствах обычно используют всю ширину экрана, поэтому вы не видите этого эффекта. Здесь MDN говорит об атрибуте width:

Средство ширины носителя описывает ширину поверхности отображения выходного устройства (например, ширину окна документа или ширину окна страницы на принтере).

Поэтому, если вы хотите запускать стили, если ваше устройство имеет разрешение шириной 1440px я бы использовал его следующим образом:

@media (max-device-width: 1440px) {
    /* your style */
}

Подробнее об этом можно узнать в документации MDN. Может быть, этот вопрос тоже интересен.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню