https://github.com/barandev/media-queries
A collection of CSS media queries implemented for 236 different devices including mobiles, tablets, watches, and laptops. Perfect for developers seeking to create responsive designs that cater to a wide array of screen sizes and resolutions.
https://github.com/barandev/media-queries
collection css css-media-queries dataset datasets media-queries
Last synced: 2 months ago
JSON representation
A collection of CSS media queries implemented for 236 different devices including mobiles, tablets, watches, and laptops. Perfect for developers seeking to create responsive designs that cater to a wide array of screen sizes and resolutions.
- Host: GitHub
- URL: https://github.com/barandev/media-queries
- Owner: BaranDev
- Created: 2024-04-05T16:04:56.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T14:37:03.000Z (about 2 years ago)
- Last Synced: 2024-05-03T01:37:31.622Z (about 2 years ago)
- Topics: collection, css, css-media-queries, dataset, datasets, media-queries
- Language: CSS
- Homepage:
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Media Queries Collection
Welcome to the most extensive collection of device-specific CSS media queries available on GitHub. This repository aims to assist frontend developers in creating responsive and optimized web designs that cater to a wide variety of devices, including but not limited to smartphones, tablets, laptops, and smartwatches.
If you're aiming to fine-tune your website for every model of iPhone or ensure your design looks perfect on the latest tablets, this collection has got you covered.
## What's Inside?
- Media queries for **236 different devices** including mobiles, tablets, laptops, and smartwatches.
- Includes queries for various **screen sizes, resolutions, and orientations**.
- Organized and easy-to-navigate documentation.
- Designed to be a comprehensive starting point for **responsive web design**.
## How to Use
To incorporate these media queries into your project:
### Way 1:
1. Go to the [media_queries.css](https://github.com/BaranDev/Media-Queries/blob/c6bbc20d319bb2d15eb4c1bc4b4927365e530dc9/media_queries.css) file and copy-paste the CSS media query snippets you want inside your CSS file.
### Way 2:
1. Clone the repository or download the CSS file directly.
2. Link to the CSS file in your HTML document, or copy the required media queries into your existing CSS file.
3. Customize the styles within each media query block to suit your design needs.
## Contribution
Your contributions are welcome! If you have suggestions for additional devices or improvements to existing queries, please open an issue or submit a pull request.
## License
This project is released under the MIT License. Feel free to use it in both personal and commercial projects. I only ask that you give credit where it's due.
## Credits
This project was initiated and maintained by [BaranDev](https://github.com/BaranDev). Special thanks to all contributors to come.