CSS Media Queries Boilerplate

/* REGULAR (NON-RETINA DISPLAY) MEDIA QUERIES */ /**********************************************/ @media screen and (min-width: 25em) { /* = 400px */ } /* end 25em (400px) MQ */ @media screen and (min-width: 31.25em) { /* = 500px */ } /* end 31.25em (500px) MQ */ @media screen and (min-width: 37.5em) { /* = 600px */ } /* end 37.5em (600px) MQ */ @media screen and (min-width: 43.75em) { /* = 700px */ } /* end 43.75em (700px) MQ */ @media screen and (min-width: 50em) { /* = 800px */ } /* end 50em (800px) MQ */ @media screen and (min-width: 56.25em) { /* = 900px */ } /* end 56.25em (900px) MQ */ @media screen and (min-width: 62.5em) { /* = 1000px */ } /* end 62.5em (1000px) MQ */ @media screen and (min-width: 68.75em) { /* = 1100px */ } /* end 68.75em (1100px) MQ */ @media screen and (min-width: 75em) { /* = 1200px */ } /* end 75em (1200px) MQ */ @media screen and (min-width: 81.25em) { /* = 1300px */ } /* end 81.25em (1300px) MQ */ @media screen and (min-width: 87.5em) { /* = 1400px */ } /* end 87.5em (1400px) MQ */ @media screen and (min-width: 93.75em) { /* = 1500px */ } /* end 93.75em (1500px) MQ */ @media screen and (min-width: 100em) { /* = 1600px */ } /* end 100em (1600px) MQ */ /* RETINA DISPLAY MEDIA QUERIES */ /********************************/ @media (-webkit-min-device-pixel-ratio: 1.25) and (min-resolution: 120dpi) { } @media (-webkit-min-device-pixel-ratio: 1.3) and (min-resolution: 124.8dpi) { } @media (-webkit-min-device-pixel-ratio: 1.5) and (min-resolution: 144dpi) { } @media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { }

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.