2013-07-28 48 views
1

試圖應用一些媒體查詢。媒體查詢不起作用?

CSS沒有媒體查詢

blockquote { 
margin: 1.5em 0; 
font-family: 'Gentium Basic', Georgia, serif; 
font-size: 20px; 
line-height: 1.6em; 
font-weight: normal; 
font-style: italic; 
border-left: 1px dotted; 
padding: 0 0 0 25px; 
left: 50%; 
margin-left: -150px; 
width: 650px; 
} 

隨後施加的:

/* larger than 800px */ 
@media only screen and (min-width: 801px) { 
    #mobileNav { 
    height: 0 !important; 
    } 
} 
/* 800px and smaller */ 
@media only screen and (max-width: 800px) { 
    #bannerImage { 
    background-attachment: scroll !important; 
    } 

blockquote { 
margin: 1.5em 0; 
font-family: 'Gentium Basic', Georgia, serif; 
font-size: 20px; 
line-height: 1.6em; 
font-weight: normal; 
font-style: italic; 
border-left: 1px dotted; 
padding: 0 0 0 25px; 
} 

網站here

我想要做的就是有塊引用適應屏幕。目前,它這樣做時,頁面的寬度改變:

enter image description here

當我想它這樣做:

enter image description here

+1

可以定義*不工作?* –

+0

你想幹什麼你的媒體查詢呢? – Danield

+0

@Danield更新了問題。 – Michael

回答

3

如果您沒有在媒體查詢定義width ,它只會使用通用樣式表中定義的width(在本例中爲650px),因此您需要在媒體查詢規則塊中再次定義width

@media only screen and (max-width: 800px) { 
    blockquote { 
     margin: 1.5em 0; 
     font-family: 'Gentium Basic', Georgia, serif; 
     font-size: 20px; 
     line-height: 1.6em; 
     font-weight: normal; 
     font-style: italic; 
     border-left: 1px dotted; 
     padding: 0 0 0 25px; 
     width: 100%; /* Specify some width here */ 
     /* You should use auto value as you are using margins and paddings */ 
    } 

    /* Other styles goes here */ 
} 

注意:如果你只在你粘貼 這裏,比我想告訴你,你是不是關閉 媒體查詢框媒體查詢樣式。

Demo

+0

沒有工作。我在哪裏關閉街區出錯? – Michael

+0

@Michael等一下,我會給你演示 –

+0

@Michael分享演示,調整小提琴窗口 –