snipt

Ctrl+h for KB shortcuts

CSS

Main @media

1
2
3
4
@media (min-width: 1200px) {}
@media (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 979px) {}
@media (max-width: 480px) {}
https://snipt.net/embed/c4cf8d19289a9ed5e29272aa8d3e727a/
https://snipt.net/raw/c4cf8d19289a9ed5e29272aa8d3e727a/
c4cf8d19289a9ed5e29272aa8d3e727a
css
CSS
4
2016-09-30T22:54:21
True
False
False
Jul 09, 2012 at 09:50 AM
/api/public/snipt/43644/
main-media
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1200px</span><span class="o">)</span> <span class="p">{}</span> </span><span id="L-2"><a name="L-2"></a><span class="k">@media</span> <span class="o">(</span><span class="nt">max-width</span><span class="o">:</span> <span class="nt">767px</span><span class="o">)</span> <span class="p">{}</span> </span><span id="L-3"><a name="L-3"></a><span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">768px</span><span class="o">)</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">max-width</span><span class="o">:</span> <span class="nt">979px</span><span class="o">)</span> <span class="p">{}</span> </span><span id="L-4"><a name="L-4"></a><span class="k">@media</span> <span class="o">(</span><span class="nt">max-width</span><span class="o">:</span> <span class="nt">480px</span><span class="o">)</span> <span class="p">{}</span> </span></pre></div> </td></tr></table>
css, media, responsive, screen

CSS

Media query for iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio: 2) { }
https://snipt.net/embed/d1479c051b595823de4b2921a8e962e9/
https://snipt.net/raw/d1479c051b595823de4b2921a8e962e9/
d1479c051b595823de4b2921a8e962e9
css
CSS
1
2016-09-30T14:29:50
True
False
False
/api/public/snipt/35154/
media-query-for-iphone-4
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="k">@media</span> <span class="nt">only</span> <span class="nt">screen</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">-webkit-min-device-pixel-ratio</span><span class="o">:</span> <span class="nt">2</span><span class="o">)</span> <span class="p">{</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
media, query
Copyrighted, illegal, or inappropriate content? Email support@snipt.net.