Commit bb936b80 authored by Rohan Sakhale's avatar Rohan Sakhale 💻

Update CSS-Media-Queries-for-Responsive-Development.md

parent 669596ea
Pipeline #6943213 passed with stage
in 5 minutes and 31 seconds
......@@ -17,23 +17,45 @@ If you are looking for quite a standard and less complex solution, below listed
# Code
```css
/* smartphones, iPhone, portrait 480x320 phones */
@media (min-width:320px) { }
/* smartphones, iPhone, portrait phones width 320 */
@media (max-width:320px) {
}
/* smartphones, iPhone, portrait phones width 384 */
@media (min-width:321px) and (max-width:384px) {
}
/* smartphones, iPhone, portrait phones width 480 */
@media (min-width:385px) and (max-width:480px) {
}
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
@media (min-width:481px) { }
@media (min-width:481px) and (max-width: 640px) {
}
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
@media (min-width:641px) { }
@media (min-width:641px) and (max-width: 960px) {
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:961px) { }
@media (min-width:961px) and (max-width: 1024px) {
}
/* big landscape tablets, laptops, and desktops */
@media (min-width:1025px) { }
@media (min-width:1025px) and (max-width: 1360px) {
}
/* hi-res laptops and desktops */
@media (min-width:1281px) { }
@media (min-width: 1361px) {
}
```
# More Sources
......
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