CSS媒體最小寬度不應用所有樣式

-1

@media (min-width: 1280px) 
{ 
    .window-padding { 
     padding-top: 20px; 
     padding-bottom: 20px; 
     padding-left: 30px; 
     padding-right: 30px; 
    } 
} 

@media (min-width: 769px) 

{ 
    .window-padding { 
     padding-right: 20px; 
     padding-left: 20px; 
     padding-left: 10px; 
     padding-right: 10px; 
    } 
} 

.window-padding { 
    padding-right: 10px; 
    padding-left: 10px; 
    padding-left: 0px; 
    padding-right: 0px; 
}

然而，當我在瀏覽器中打開（寬度> 1280px）中，僅填充-top和填充底部從MIN-寬度：1280px被應用。填充左側和填充右側來自不具有@media條件的樣式。這裏是什麼它適用：

編輯：我重新排序CSS有最低尺寸的第一固定的問題。另外，我有錯誤重複的填充樣式。

來源

2016-09-22 madu

首先你要去的默認樣式（後增加屏幕解析度）這意味着默認> 768> 1280（這適用於最小寬度）如果u選擇使用最大寬度（你要去默認> 1280> 768）

的最小寬度

.class { 
    your style 
} 
@media screen (min-width: 768) { 
    override default 
} 
@media screen (min-width: 1280) { 
    override 768 
} and so on

的最大寬度

.class { 
    your style 
} 
@media screen (max-width: 1280) { 
    override default 
} 
@media screen (min-width: 768) { 
    override 1280 
} and so on

來源

2016-09-22 13:11:12 ShadowFoOrm

謝謝。這解決了這個問題。 – madu

重新安排你的CSS &添加Max-width

.window-padding { 
     padding-right: 50px; 
     padding-left: 50px; 
    } 


    @media (min-width: 1280px) { 
     .window-padding { 
      padding-top: 20px; 
      padding-bottom: 20px; 
      padding-left: 30px; 
      padding-right: 30px; 
     } 
    } 
    @media (min-width: 769px) and (max-width: 1279px) { 
     .window-padding { 
      padding-right: 20px; 
      padding-left: 20px; 
     } 
    }

來源

2016-09-22 12:50:06

感謝萊吉。我重新排序，但現在它適用於最小寬度：769px的填充左側和填充右側。 – madu

你試過默認/ 769比1280？以該順序？ – ShadowFoOrm

您main CSS文件（S）之後，一定要打電話@media風格，這可以幫助你覆蓋的風格。

.window-padding { 
    padding-right: 10px; 
    padding-left: 10px; 
    padding-left: 0px; 
    padding-right: 0px; 
} 
@media (min-width: 1280px) 
{ 
    .window-padding { 
     padding-top: 20px; 
     padding-bottom: 20px; 
     padding-left: 30px; 
     padding-right: 30px; 
    } 
} 

@media (min-width: 769px) and (max-width: 1279px) 
{ 
    .window-padding { 
     padding-right: 20px; 
     padding-left: 20px; 
     padding-left: 10px; 
     padding-right: 10px; 
    } 
}

來源

2016-09-22 12:51:19

@madu更新了我的答案，將限制設置爲@media（min-width：769px）和（max-width：1279px）' –

有誰請指教爲什麼發生這種情況？

更重要的CSS樣式應該付出更多的下級

來源

2016-09-22 12:57:08 xameeramir

CSS媒體最小寬度不應用所有樣式

回答

相關問題