snipt

Ctrl+h for KB shortcuts

CSS

Media query ratio

@media screen and (device-aspect-ratio: 16/9) {  }
https://snipt.net/embed/bf7e4861cf0e5c6be99fcc17dd02cfda/
/raw/bf7e4861cf0e5c6be99fcc17dd02cfda/
bf7e4861cf0e5c6be99fcc17dd02cfda
css
CSS
1
2019-06-24T07:26:42
True
False
False
/api/public/snipt/35153/
media-query-ratio
<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></span><span id="L-1"><a name="L-1"></a><span class="k">@media</span> <span class="nt">screen</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">device-aspect-ratio</span><span class="o">:</span> <span class="nt">16</span><span class="o">/</span><span class="nt">9</span><span class="o">)</span> <span class="p">{</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
media, query

CSS

Media query

@media all and (min-width: 800px) {  }
https://snipt.net/embed/fbbc29898d3b78f2ab5e8f3f2d60cda9/
/raw/fbbc29898d3b78f2ab5e8f3f2d60cda9/
fbbc29898d3b78f2ab5e8f3f2d60cda9
css
CSS
1
2019-06-24T07:26:47
True
False
False
/api/public/snipt/35152/
media-query-2
<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></span><span id="L-1"><a name="L-1"></a><span class="k">@media</span> <span class="nt">all</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">800px</span><span class="o">)</span> <span class="p">{</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
media, query

CSS

Media query

@media (min-width: 800px) {  }
https://snipt.net/embed/a134af7c8dbb5ba1c94b0c8c57d227f7/
/raw/a134af7c8dbb5ba1c94b0c8c57d227f7/
a134af7c8dbb5ba1c94b0c8c57d227f7
css
CSS
1
2019-06-24T07:26:52
True
False
False
/api/public/snipt/35151/
media-query-1
<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></span><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">800px</span><span class="o">)</span> <span class="p">{</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
media, query

HTML

media queries max-width

1
2
3
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}
https://snipt.net/embed/2fb3e1e4c318b3f07e3c67d753924800/
/raw/2fb3e1e4c318b3f07e3c67d753924800/
2fb3e1e4c318b3f07e3c67d753924800
html
HTML
4
2019-06-22T20:11:06
True
False
False
/api/public/snipt/16828/
media-queries-max-width
<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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a>} </span></pre></div> </td></tr></table>
media, queries