@media Rules That Fits All Devices

Here are the @media Rules that I personally use to fit all possible devices and screen sizes.

Sizes from Chrome device toolbar.

// Mobile
@media (min-width: 320px) and (max-width: 425px) {
// ..
}

// Tablet
@media (min-width: 426px) and (max-w…


This content originally appeared on DEV Community and was authored by YoussefZidan

Here are the @media Rules that I personally use to fit all possible devices and screen sizes.

Sizes from Chrome device toolbar.

// Mobile
@media (min-width: 320px) and (max-width: 425px) {
  // ..
}

// Tablet
@media (min-width: 426px) and (max-width: 768px) {
  // ..
}

// Small Laptop
@media (min-width: 769px) and (max-width: 1024px) {
  // ..
}

// Large Laptop
@media (min-width: 1025px) and (max-width: 1440px) {
  // ..
}

// 4K
@media (min-width: 1441px) and (max-width: 2560px) {
  // ..
}


This content originally appeared on DEV Community and was authored by YoussefZidan


Print Share Comment Cite Upload Translate
APA
YoussefZidan | Sciencx (2022-10-01T05:11:52+00:00) » @media Rules That Fits All Devices. Retrieved from https://www.scien.cx/2021/05/01/media-rules-that-fits-all-devices/.
MLA
" » @media Rules That Fits All Devices." YoussefZidan | Sciencx - Saturday May 1, 2021, https://www.scien.cx/2021/05/01/media-rules-that-fits-all-devices/
HARVARD
YoussefZidan | Sciencx Saturday May 1, 2021 » @media Rules That Fits All Devices., viewed 2022-10-01T05:11:52+00:00,<https://www.scien.cx/2021/05/01/media-rules-that-fits-all-devices/>
VANCOUVER
YoussefZidan | Sciencx - » @media Rules That Fits All Devices. [Internet]. [Accessed 2022-10-01T05:11:52+00:00]. Available from: https://www.scien.cx/2021/05/01/media-rules-that-fits-all-devices/
CHICAGO
" » @media Rules That Fits All Devices." YoussefZidan | Sciencx - Accessed 2022-10-01T05:11:52+00:00. https://www.scien.cx/2021/05/01/media-rules-that-fits-all-devices/
IEEE
" » @media Rules That Fits All Devices." YoussefZidan | Sciencx [Online]. Available: https://www.scien.cx/2021/05/01/media-rules-that-fits-all-devices/. [Accessed: 2022-10-01T05:11:52+00:00]
rf:citation
» @media Rules That Fits All Devices | YoussefZidan | Sciencx | https://www.scien.cx/2021/05/01/media-rules-that-fits-all-devices/ | 2022-10-01T05:11:52+00:00
https://github.com/addpipe/simple-recorderjs-demo