Commit 4880f16d authored by Rohan Sakhale's avatar Rohan Sakhale

Media Queries post

parent cb0a11c5
Pipeline #6118643 canceled with stage
---
title: CSS Media Queries for Responsive Development
date: 2017-01-31 13:07:12
categories:
- Codes
tags:
- css
- code-example
- media-queries
---
One of the main factor for responsive website development is developing css for multiple screen devices. Often it becomes difficult when we have so many set of devices and different set of dimension to each of those device, what dimensions we should fit. There are many answers already available on internet via css-tricks, stackoverflow etc.
If you are looking for quite a standard and less complex solution, below listed media queries are best fit, as we have been using them for quite a good projects and have achieved decent solution.
```css
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media (min-width:320px) { }
/* smartphones, Android phones, landscape iPhone */
@media (min-width:480px) { }
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (min-width:600px) { }
/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:801px) { }
/* big landscape tablets, laptops, and desktops */
@media (min-width:1025px) { }
/* hi-res laptops and desktops */
@media (min-width:1281px) { }
```
But if you are looking for every device solution, this [article](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) from **css-tricks** is perfect solution.
If you are still confused and looking to explore more comprehensive solution, try this [repository](http://cssmediaqueries.com/).
\ No newline at end of file
User-Agent: *
Disallow:
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment