媒体查询不起作用？

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

来源

2013-07-28 Michael

可以定义*不工作？* –

你想干什么你的媒体查询呢？ – Danield

@Danield更新了问题。 – Michael

如果您没有在媒体查询定义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

来源

2013-07-28 11:45:53

没有工作。我在哪里关闭街区出错？ – Michael

@Michael等一下，我会给你演示 –

@Michael分享演示，调整小提琴窗口 –

媒体查询不起作用？

回答

相关问题