Запрос на публикацию не работает на рабочем столе

Question

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

Моего разрешение экрана 1440 х 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.

Могу ли я узнать, сделал ли я что-нибудь не так?

Answer 1

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

Answer 2

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

http://jsfiddle.net/7VVsA/

@media (max-width: 1440px) { 

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

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

} 

Answer 3

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

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

Так что, если вы хотите, чтобы вызвать стили, если устройство имеет разрешение ширина 1440px Я хотел бы использовать его как это:

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

Вы можете прочитать more об этом в документации MDN. Может быть, this вопрос тоже интересный.

Answer 4

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

Like

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

} 

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

Как

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

} 

Answer 5

Я проверил код, и он работает нормально, убедитесь, что вы ссылались на 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; 
} 
}