Media Queries For Criterion Devices

A media enquiry consists of a media type together with at to the lowest degree ane appear that limits the manner sheets' reach past times using media features, such equally width, height, together with color.

I prefer to role the bootstrap media queries responsive standards.


/* Large desktop */ @media (min-width: 1200px) { ... }   /* Portrait tablet to landscape together with desktop */ @media (min-width: 768px) together with (max-width: 979px) { ... }   /* Landscape vociferation to portrait tablet */ @media (max-width: 767px) { ... }   /* Landscape phones together with downwardly */ @media (max-width: 480px) { ... } 
It depends on the requirement which media enquiry touchstone to use. You tin rank the axe abide by many media queries standards together with breaking points. This is ane instance of it.
 /* Smartphones (portrait together with landscape) ----------- */ @media exclusively covert  together with (min-device-width : 320px)  together with (max-device-width : 480px) { /* Styles */ }  /* Smartphones (landscape) ----------- */ @media exclusively covert  together with (min-width : 321px) { /* Styles */ }  /* Smartphones (portrait) ----------- */ @media exclusively covert  together with (max-width : 320px) { /* Styles */ }  /* iPads (portrait together with landscape) ----------- */ @media exclusively covert  together with (min-device-width : 768px)  together with (max-device-width : 1024px) { /* Styles */ }  /* iPads (landscape) ----------- */ @media exclusively covert  together with (min-device-width : 768px)  together with (max-device-width : 1024px)  together with (orientation : landscape) { /* Styles */ }  /* iPads (portrait) ----------- */ @media exclusively covert  together with (min-device-width : 768px)  together with (max-device-width : 1024px)  together with (orientation : portrait) { /* Styles */ }  /* Desktops together with laptops ----------- */ @media exclusively covert  together with (min-width : 1224px) { /* Styles */ }  /* Large screens ----------- */ @media exclusively covert  together with (min-width : 1824px) { /* Styles */ }  /* iPhone four ----------- */ @media exclusively covert together with (-webkit-min-device-pixel-ratio : 1.5), exclusively covert together with (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Sumber http://developer-paradize.blogspot.com

Comments

Popular posts from this blog

What Are The Main Components of a Computer System

Top Qualities To Look For In An IT Support Team

How To Integrate Google Adwords Api Into Codeigniter?