Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the media query for large desktops?

Tags:

I am using media query for normal desktop screen and idt should not applicable for larger screens. But below media query applied to large desktop screen also. Please correct my media query, For all help thanks in advance.

@media (min-width: 992px) and (max-width : 1200px){//This should work for Normal desktops(15 to 18 inch) only. } 
like image 813
sireesha j Avatar asked Feb 23 '17 11:02

sireesha j


2 Answers

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;   } } 
like image 118
Himanshu Dhiraj Mishra Avatar answered Oct 06 '22 01:10

Himanshu Dhiraj Mishra


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;     } } 
like image 26
The Lazy Dev Otaku Avatar answered Oct 06 '22 00:10

The Lazy Dev Otaku