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. }
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; } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With