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.
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
Post a Comment