@media screen and (min-width: 0px)and (max-width: 600px) {
.box {
&-left,
&-center,
&-right {
width: 100%;
padding: 10px;
height: 10%;
box-sizing: border-box;
div {
width: 50%;
height: 100%;
background: red;
}
}
}
}
@media screen and (min-width: 600px)and (max-width: 800px) {
.box {
&-left,
&-center,
&-right {
width: 100%;
padding: 10px;
height: 10%;
box-sizing: border-box;
div {
width: 100%;
height: 100%;
background: red;
}
}
}
}
@media screen and (min-width: 800px) and (max-width: 959px) {
.box {
&-left,
&-center,
&-right {
width: 100%;
padding: 10px;
height: 10%;
background: #000;
box-sizing: border-box;
div {
// width: 50%;
width: (200/@size);
height: 100%;
background: red;
}
}
}
}
@media screen and (min-width: 960px) and (max-width: 1023px) {}
@media screen and (min-width: 1024px) and (max-width: 1049px) {}
@media screen and (min-width: 1050px) and (max-width: 1151px) {}
@media screen and (min-width: 1152px) and (max-width: 1279px) {}
@media screen and (min-width: 1280px) and (max-width: 1359px) {}
@media screen and (min-width: 1360px) and (max-width: 1366px) {}
@media screen and (min-width: 1400px) and (max-width: 1439px) {}
@media screen and (min-width: 1440px) and (max-width: 1599px) {}
@media screen and (min-width: 1680px) {}