（CSS）媒體查詢

2015年11月11日（CSS）媒體查詢

嘿大家，

我想提出一個網站，我有一個CSS媒體查詢的一個問題。首先讓我告訴你我的代碼：

@media screen and (max-width: 1100px) { 
 
    #services { 
 
     width: 90%; 
 
    } 
 
    
 
} 
 

 
#services { 
 
    text-align: center; 
 
    width: 1100px; 
 
    height: 600px; 
 
    background-color: white; 
 
    margin-left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    margin-top: 100px; 
 
    border-radius: 20px; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    -moz-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    box-shadow:   0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
}

<div id='services'></div>

所以這是我的代碼（不是很難右），但你可以看到我要換去服務容器時的寬度瀏覽器窗口小於1100.但它不會改變寬度！我之前有過這個問題，我修好了，但現在我真的不能。

有人可以幫我嗎？在此先感謝！

啤酒YOLO

來源

2015-11-11 FlyingUnderpants

您的媒體查詢需要低於標準CSS規則來定義，使其能夠覆蓋它們。就像現在一樣，#services的標準規則覆蓋了媒體查詢規則。

來源

2015-11-11 20:54:35 emackey

雅剛打我吧:) –

謝謝你現在的作品，也感謝您的快速反應！ – FlyingUnderpants

如果這是你需要的媒體查詢，你可以將它和更新 #service規則是這樣的：

width: 90%; 
max-width: 1100px;

示例代碼段

#services { 
 
    text-align: center; 
 
    width: 90%; 
 
    max-width: 1100px; 
 
    height: 600px; 
 
    background-color: white; 
 
    margin-left: 50%; 
 
    transform: translate(-50%); 
 
    -webkit-transform: translate(-50%); 
 
    -ms-transform: translate(-50%); 
 
    margin-top: 100px; 
 
    border-radius: 20px; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    -moz-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
    box-shadow:   0px 5px 0px 0px rgba(197, 197, 197, 1); 
 
}

<div id='services'></div>

來源

2015-11-11 21:20:27 LGSon

（CSS）媒體查詢

回答

相關問題