javascript - 以不同的分辨率显示图像

Question

我创建了一个示例代码来查看不同分辨率的图像，例如平板电脑、手机和台式机，该代码可以正常工作，但实际上我想在桌面本身内查看所有这些分辨率，但无法正常工作。我的代码如下所示

谁能告诉我一些解决方案。

JSFiddle

CSS

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box1 {
      width: 480px;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box2 {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box3 {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box4 {
      width: 25%;
      padding-bottom: 25%;
   }
}

Answer 1

您应该阅读媒体查询。媒体查询用于“激活”或“停用”CSS 规则。您正在尝试创建不同的 div 大小，但您的 CSS 规则并非全部“激活”。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

下面的 CSS 应该可以完成您想要做的事情。

CSS:

img {
    max-width:100%;
}
.box1 {
    width: 480px;
    padding-bottom: 10%;
}
.box2 {
    width: 650px;
    padding-bottom: 10%;
}
.box3 {
    width: 1050px;
    padding-bottom: 10%;
}
.box4 {
    width: 1290px;
    padding-bottom: 10%;
}

演示: http://jsfiddle.net/p5nxox41/3/