An Interest In:
Web News this Week
- March 4, 2024
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
October 4, 2021 02:54 pm GMT
Original Link: https://dev.to/youssefzidan/css-media-rules-that-fits-all-possible-devices-4pli
CSS @Media Rules that fits all possible devices.
In this article I will share with you my experience with responsive design using css @media Rules.
Before you start adding responsiveness into your app, You have to ask your self:
Am I going to design the app in Mobile First or Desktop First?
Here are the @media rules that I personally use to fit all possible devices and screen sizes.
Sizes from Chrome device toolbar.
Desktop First
/* ================ Desktop First ================ *//* Any other bigger devices */body { background: brown;}/* Ultra HD */@media (max-width: 3840px) { body { background: red; }}/* Full HD */@media (max-width: 2560px) { body { background: blue; }}/* Labtop L*/@media (max-width: 1440px) { body { background: green; }}/* Labtop */@media (max-width: 1024px) { body { background: cyan; }}/* Tablet */@media (max-width: 768px) { body { background: purple; }}/* Mobile */@media (max-width: 425px) { body { background: yellow; }}
With Desktop First we use max-width
and the sizes order from bigger (at the top) and smaller (at the bottom).
Mobile First
/* ================ Mobile First ================ *//* Any other smaller devices */body { background: brown;}/* Mobile */@media (min-width: 425px) { body { background: yellow; }}/* Tablet */@media (min-width: 768px) { body { background: purple; }}/* Labtop */@media (min-width: 1024px) { body { background: cyan; }}/* Labtop L*/@media (min-width: 1440px) { body { background: green; }}/* Full HD */@media (min-width: 2560px) { body { background: blue; }}/* Ultra HD */@media (min-width: 3840px) { body { background: red; }}
With Mobile First we use min-width
and the sizes order from smaller (at the top) and bigger (at the bottom).
Original Link: https://dev.to/youssefzidan/css-media-rules-that-fits-all-possible-devices-4pli
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To