Responsive Layout (Resize Me!)
HTML
<body>
<div id='bit'></div>
<div id='bit'></div>
</body>
CSS
:root {
background: #f4f4f4;
}
#bit {
-webkit-transition: 0.4s;
}
#bit:nth-child(1) {
background: #F3DE8A;
}
#bit:nth-child(2) {
background: #FAA275;
}
@media screen and (orientation: landscape) {
#bit {
height: 100%;
position: absolute;
margin: auto;
top: 0;
}
#bit:nth-child(1) {
left: 0;
width: calc(100% / 3);
}
#bit:nth-child(2) {
right: 0;
width: calc(calc(100% / 3) * 2);
}
}
@media screen and (max-aspect-ratio: 3 / 2) {
#bit {
height: 100%;
position: absolute;
margin: auto;
top: 0;
}
#bit:nth-child(1) {
left: 0;
width: 50%;
}
#bit:nth-child(2) {
right: 0;
width: 50%;
}
}
@media screen and (max-aspect-ratio: 1 / 1) {
#bit {
width: 100%;
height: 50%;
position: absolute;
top: 0;
}
#bit:nth-child(1) {
left: 0;
width: 100%;
}
#bit:nth-child(2) {
right: 0;
width: 100%;
top: 50%;
}
}
