Media Query (mobile to desktop)

by SHELDON PASCIAK

HTML

<h1>Media Queries</h1>

<div class="desktop">Desktop</div>
<div class="sm-desktop">Small Desktop / Tablet</div>
<div class="tablet">Tablet</div>
<div class="tablet-mobile">Table / Mobile</div>
<div class="mobile">Mobile</div>

<div class="report-size"></div>

CSS

.mobile { display: block; }
.desktop,
.sm-desktop,
.tablet,
.tablet-mobile { display: none; }

.report-size { position: fixed; top: 1em; right: 1em; }
.report-size:after { content: 'px'; }

/* tablet/mobile */
/* ------------- */
@media only screen and (min-width: 480px) {
    .tablet-mobile { display: block; }
    .desktop,
    .sm-desktop,
    .tablet,
    .mobile { display: none; }
}

/* tablet */
/* ------ */
@media only screen and (min-width: 620px) {
    .tablet { display: block; }
    .desktop,
    .sm-desktop,
    .tablet-mobile,
    .mobile { display: none; }
}

/* small desktop/tablet */
/* -------------------- */
@media only screen and (min-width: 768px) {
    .sm-desktop { display: block; }
    .desktop,
    .tablet,
    .tablet-mobile,
    .mobile { display: none; }
}

/* desktop */
/* ------- */
@media only screen and (min-width: 960px) {
    .desktop { display: block; }
    .sm-desktop,
    .tablet,
    .tablet-mobile,
    .mobile { display: none; }
}

JavaScript

var reportSize = function() {
    $('.report-size').html($(window).width());
};

$(window).resize(reportSize);

reportSize();