Responsive design
Media queries
600px, 900px, 1200px, and 1800px
https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
@media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
@media (min-width: 1800px) { @content; }
}
// usage
.my-box {
padding: 10px;
@include for-desktop-up {
padding: 20px;
}
}
Media queries in LESS
Everyday I'm Bubbling. With Media Queries and LESS | Always Twisted. Front-End Development."
header {
color: red;
@media only screen and (min-width : 768px) { color: green; }
@media only screen and (min-width : 1024px) { color: blue; }
}
section {
color: green;
@media only screen and (min-width : 768px) { color: blue; }
@media only screen and (min-width : 1024px) { color: red; }
}
compiles to:
header {
color: red;
}
@media only screen and (min-width: 768px) {
header {
color: green;
}
}
@media only screen and (min-width: 1024px) {
header {
color: blue;
}
}
section {
color: green;
}
@media only screen and (min-width: 768px) {
section {
color: blue;
}
}
@media only screen and (min-width: 1024px) {
section {
color: red;
}
}
7d5ed116-4867-4b19-b948-e100b51bbde0
Created on: 12th October, 2022
Last updated: 12th October, 2022
Tagged With: