What is the media query for large desktops?
Just check what are the screen sizes you need to styled with difference styles. then use media queries as you need. ;)
@media screen and (min-width: 1400px) {}
@media screen and (min-width: 1600px) {}
@media screen and (min-width: 1900px) {}
The challenges of optimizing for large-scale displays center around how to scale and manage content.
You need to assume screen width at certain points.
Example: for class "container"
@media screen and (min-width: 1400px) {
.container {
width: 1370px;
}
}
@media screen and (min-width: 1600px) {
.container {
width: 1570px;
}
}
@media screen and (min-width: 1900px) {
.container {
width: 1870px;
}
}
Media Queries for Responsive Design
@media screen and (min-width: 600px) {
//For Tablets
.container {
width: 100;
}
}
@media screen and (min-width: 768px) {
//For Laptops
.container {
width: 738px;
}
}
@media screen and (min-width: 992px) {
//For Large Laptops
.container {
width: 962px;
}
}
@media screen and (min-width: 1280px) {
//For Big TV's (HD Screens)
.container {
width: 1250px;
}
}
@media screen and (min-width: 1920px) {
//For Projectors or Higher Resolution Screens (Full HD)
.container {
width: 1890px;
}
}
@media screen and (min-width: 3840px) {
//For 4K Displays (Ultra HD)
.container {
width: 3810px;
}
}