Media Queries in CSS ?

Question

Can anyone tell me the devices width used for media queries in CSS. I am really confused and i cant understand Media Queries width for different devices.

Answer 1

LIFE DO GIVE SECOND CHANCE :)
If you have a pc/laptop, you can get the typical devices viewport dimensions by going to the dev tools in any web browser(Chrome and Firefox recommended).

Or there are some online resources out there:
1. https://www.icwebdesign.co.uk/common-viewport-sizes
2. https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html

(This one is overkill..!)
3. http://viewportsizes.mattstow.com

Answer 2

Well thats a good question. But i dont know the answer

Answer 3

hi LIFE DO GIVE SECOND CHANCE :)

you can use bootstrap width breakpoint refference for media querry. although you don't use bootstrap.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 576px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 567px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

Answer 4

Hope someone answer this question