JSFiddle - React, Tailwind, and code Playground
Typical CSS Media Queries
by Jennifer Perrin
HTML
<div class='divider'>
<div class='name'>Typical CSS Media Queries</div>
</div>
<pre>
/* Larger than mobile */
@media (min-width: 400px) {
}
/* Larger than phablet */
@media (min-width: 550px) {
}
/* Larger than tablet */
@media (min-width: 750px) {
}
/* Larger than desktop */
@media (min-width: 1000px) {
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
}
</pre>
CSS
@charset "UTF-8";
@import url("http://fonts.googleapis.com/css?family=Dosis:400,300,700");
body {
padding: 10px 50px;
font-family: "Dosis", sans-serif;
}
.divider {
position: relative;
text-align: left;
line-height: 1.2;
margin: 10px 0 30px;
}
.divider::before {
content: "";
display: block;
position: absolute;
top: 12px;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.divider .name {
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.44);
background: #fff;
text-transform: uppercase;
font-size: 16px;
padding: 3px 8px 2px 12px;
letter-spacing: .3em;
color: rgba(0, 0, 0, 0.6);
position: relative;
}
.divider .name:hover {
border-color: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, 0.8);
}
/* Larger than mobile */
@media (min-width: 400px) {
}
/* Larger than phablet */
@media (min-width: 550px) {
}
/* Larger than tablet */
@media (min-width: 750px) {
}
/* Larger than desktop */
@media (min-width: 1000px) {
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
}