小编Mün*_*ter的帖子

我正在开展一个项目,在那里我有一些需要响应的div钻石图片.

下图显示了我创建的div中的钻石,但它并不适用于所有尺寸.我希望钻石能够根据浏览器的大小做出反应,因此它始终适合.

我有一个jsFiddle,但它没有响应.只是为了展示我想要的东西,我一直在努力创造.

<div id="page">
<div id="main">
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
</div>
</div>

#page {
    width:100%;
    height:100%;
    min-height:500px;
    min-width:500px;
}
#main {
    height:80px;
    width:80px;
    position:relative;
    display:block;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
}
.box {
    display: inline-block;
    height:35%;
    width:35%;
    margin-right:5%;
    margin-top:5%;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}
.red {
    background-color:red;
}
.yellow {
    background-color:#ffd54f;
}

很感谢任何形式的帮助 :-)

如何为设备添加两个不同的@media查询css样式表.

因此,当你拥有它时,它会激活一个而当它在风景中它会激活另一个.

我的情况:

我正在尝试创建一个仅适用于横向(1024px)的页面,所以当你的设备(在我的情况下是Ipad)中以肖像(768px)显示时,它会激活一个css,告诉你将屏幕转向侧面/横向.

我试过这个:

<link rel="stylesheet" media="@media only screen and (max-device-width : 1024px) and (orientation : landscape)" href="css/tabphone.css" />
<link rel="stylesheet" media="@media only screen and (max-device-width : 768px) and (orientation : portrait)" href="css/turn.css" />

但是它只激活了最后一个.

有人知道解决我问题的方法:-)？