我创建了一个示例代码来查看不同分辨率的图像,例如平板电脑、手机和台式机,该代码可以正常工作,但实际上我想在桌面本身内查看所有这些分辨率,但无法正常工作。 我的代码如下所示
谁能告诉我一些解决方案。
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%;
}
}
最佳答案
您应该阅读媒体查询。媒体查询用于“激活”或“停用”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%;
}
关于javascript - 以不同的分辨率显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29751502/