多媒體查詢不起作用

Question

我有點困惑，因爲我習慣使用媒體查詢來做一些CSS ......我從來沒有遇到過這個問題。只有第一個媒體查詢工作良好...我有幾個媒體查詢上具體尺寸如下工作：

/* - IPAD LANDSCAPE - */ 

@media screen and (max-width: 1024px) and (orientation: landscape){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 24vw top 3.5vh, right 21vw top 1vh; 
    } 
    header object{ 
    left:16vw; 
    width:18vw !important; 
    } 
    header p{ 
    font-size:14px; 
    top:16vh; 
    left:-2vw; 
    } 
} 

/* - IPAD PORTRAIT - */ 

@media screen and (max-width: 768px) and (orientation: portrait){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 28vw top 3.5vh, right 17vw top 1vh; 
    } 
    header object{ 
    left:10vw; 
    width:24vw !important; 
    } 
    header p{ 
    font-size:20px; 
    top:10vh; 
    left:-2vw; 
    } 
} 

/* - PHONE LANDSCAPE - */ 

@media screen and (max-width: 750px) and (orientation: landscape){ 
    /*...*/ 
} 

/* - PHONE PORTRAIT - */ 

@media screen and (max-width: 450px) and (orientation: portrait){ 
    /*...*/ 
} 

我有和沒有orientation參數試過......我甚至無法弄清楚，爲什麼我的代碼沒有幫助:-)成效良好 我看了這幾個主題，但它並沒有幫助我...

感謝

編輯：

我米首次使用Bootstrap，是否會改變媒體查詢中的某些內容？

編輯2：

我看到的東西像@media screen and (max-width:screen-sm-max)當我們使用引導程序，我應該用它來代替px價值？我認爲這將仍然是相同的......

Answer 1

嘗試把最小@media查詢的碼元寬度塊第一。

/* - PHONE PORTRAIT - */ 
@media screen and (max-width: 450px) and (orientation: portrait){ 
    /*...*/ 
} 

/* - PHONE LANDSCAPE - */ 
@media screen and (max-width: 750px) and (orientation: landscape){ 
    /*...*/ 
} 

/* - IPAD PORTRAIT - */ 
@media screen and (max-width: 768px) and (orientation: portrait){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 28vw top 3.5vh, right 17vw top 1vh; 
    } 
    header object{ 
    left:10vw; 
    width:24vw !important; 
    } 
    header p{ 
    font-size:20px; 
    top:10vh; 
    left:-2vw; 
    } 
} 

/* - IPAD LANDSCAPE - */ 
@media screen and (max-width: 1024px) and (orientation: landscape){ 
    header{ 
    background-size: 28vw 30vh, 34vw 38vh; 
    background-position: right 24vw top 3.5vh, right 21vw top 1vh; 
    } 
    header object{ 
    left:16vw; 
    width:18vw !important; 
    } 
    header p{ 
    font-size:14px; 
    top:16vh; 
    left:-2vw; 
    } 
} 

它爲我解決了這類問題。 Boostrap doc也遵循這種結構。 （這裏@屏幕-SM-分鐘是可以設置謝少/ SASS變量，但你不能用固定數量的更換）

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... } 

我個人使用類似的東西，如果它可以幫助你：

@media (max-width:767px) {} 

@media (max-width:767px) and (orientation:landscape) {} 

@media (min-width:768px) and (max-width:991px) {}