CSS Media Queries - не работает

Question

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

/* Large Desktop Devices */ 
@media (min-width: 1200px) { 
    .header { 
     height: 120px; 
    } 

} 

/* Small Desktop Devices and iPad Landscape */ 
@media (min-width: 1024px) and (max-width: 1199px) { 
    .header { 
     height: 120px; 
    } 

} 

/* iPad and Tablets Potrait */ 
@media (min-width: 768px) and (max-width: 1023px) 
    .header { 
     height: 100px; 
    } 

} 

/* Large Screen Phones */ 
@media (min-width: 480px) and (max-width: 767px) 
    .header { 
     height: 90px; 
    } 

} 

/* Small Screen Phones */ 
@media (min-width: 320px) and (max-width: 479px) 
    .header { 
     height: 80px; 
    } 

} 

Если кто-нибудь может понять, почему это не работает, я хотел бы узнать!

Благодаря

Answer 1

использования, как это @media screen and (max-width:1200px) @media only screen and (max-width:1200px)

Answer 2

Вы должны изменить его @ media all and (max-width: 480px)

Answer 3

ensure you have added viewport metatag in your page 

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

also You are missing opening braces on the last 3 statements 

/* Large Desktop Devices */ 
@media (min-width: 1200px) { 
    .header { 
     height: 120px; 
    } 

} 

/* Small Desktop Devices and iPad Landscape */ 
@media (min-width: 1024px) and (max-width: 1199px) { 
    .header { 
     height: 120px; 
    } 

} 

/* iPad and Tablets Potrait */ 
@media (min-width: 768px) and (max-width: 1023px){ 
    .header { 
     height: 100px; 
    } 

} 

/* Large Screen Phones */ 
@media (min-width: 480px) and (max-width: 767px){ 
    .header { 
     height: 90px; 
    } 

} 

/* Small Screen Phones */ 
@media (min-width: 320px) and (max-width: 479px) 
    .header { 
     height: 80px; 
    } 

} 

надеюсь, что это помогает.

Answer 4

 /* Large Desktop Devices */ 
@media screen and (min-width: 1200px){ 
     .header { 
      height: 120px; 
     } 

    } 

    /* Small Desktop Devices and iPad Landscape */ 
@media screen and (min-width: 1024px) and (max-width: 1199px) { 
     .header { 
      height: 120px; 
     } 

    } 

/* iPad and Tablets Potrait */ 
    @media screen and (min-width: 768px) and (max-width: 1023px) { 
     .header { 
      height: 100px; 
     } 

    } 

    /* Large Screen Phones */ 
    @media screen and (min-width: 480px) and (max-width: 767px) { 
     .header { 
      height: 90px; 
     } 

    } 

    /* Small Screen Phones */ 
    @media screen and (min-width: 320px) and (max-width: 479px) { 
     .header { 
      height: 80px; 
     } 

    }