I have been working on my website i have used various media queries to work well in every screen size. I'm aware about the media queries for every screen. I have also read this page
Media Queries: How to target desktop, tablet, and mobile?
It was very useful. But My question are when i use my website on mobile it working fine but when i do in Desktop site in Mobile their content is breaking can anyone tell me Media query for that scenario. Thank you
I have used this:- @media screen and (min-width: 300px) and (max-width: 700px)--- For Mobile
Other two i used for to get resolve my problem that i asked above :-
- @media screen and (min-width: 701px) and (max-width:767px)
- @media screen and (min-width: 768px) and (max-width:975px)
I haven't use below 2 media query because after using this they affecting my desktop view.
- @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
- @media (min-width:1281px) { /* hi-res laptops and desktops */ }
Can anyone tell me how can i resolve the issue.
It is not a good way to provide specific media queries for every screen size, Here is basic media queries for commonly use for devices:
Mobile
only screen and (min-width: 360px)
only screen and (min-width: 480px)
Tablet
only screen and (min-width: 768px)
Desktop
only screen and (min-width: 992px)
Huge
only screen and (min-width: 1280px)
Some times i prefer 2 media queries for phone screens these media queries are enough for all screens if your code structure is good and you are not using extra margin and paddings these are the reasons which affect the media queries.