网站图片的媒体查询

Question

我对媒体查询有疑问。我有一个网站，我用 Breakpoints Tester 查看它 http://breakpointtester.com/

我已经制作了网站看到的宽度的图像，现在是时候进行一些 css 媒体查询了。

<div class="bwpb-column bwpb-video-holder backgr vertical-col-align bwpb-colwidth-4 " style="color: rgb(255, 255, 255); text-align: inherit; width: 100%; min-height: 611px; height: 375px; background: url(http://www.tfeditor.com/wp-content/uploads/2015/11/XXL-02.png) 50% 100% no-repeat rgb(255, 255, 255);"><div class="bwpb-overlay" style="background-color:rgba(255,255,255,0.01)"></div><div class="bwpb-column-inner" style="padding: 0px 15px; margin-top: 305.5px;"></div></div>

我正在尝试做这个

http://jsfiddle.net/kwstasna/habpmjuw/

但是媒体查询不起作用，当我再次使用断点时它只显示相同的照片。

谁能解释一下为什么？非常感谢！

Answer 1

您在 max-width 属性之后有分号，这会破坏内容。

之前：

@media screen and (min-width: 1281px) and  (max-width:1600px;) {

之后：

@media screen and (min-width: 1281px) and  (max-width:1600px) {

JSFiddle

Answer 2

试试这个：

@media only screen and (min-device-width : 1281px) and (max-device-width : 1600px) { 

    // your css code 

    }

网站图片的媒体查询

Media queries for website image

html

css

media-queries