Демо проверка возможностей @media

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Демо тест применения @media</title>
<meta name="author" content="aTmpl" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
    background: url(/assets/img/horizontal-ruler.png) top left no-repeat;
    position:absolute;
    top:0;
    left:0;
    height: 40px;
    z-index: 1000;
}

/* Для устройств менее 320px, по умолчанию */
h1 {
   font-size: 1.25rem;
   text-align: center;
   color: gold;
   padding-top: 30px;
}
p {
   font-size: 0.75rem; 
   color: blue;  
}

/* Для устройств более 320px */
@media only screen and (min-width: 320px) {

/* Для обычных устройств */
h1 {font-size:1.75rem;color:green;}
p {font-size:1rem;color:yellow}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {

/* Для дисплеев Retina */
h1 {font-size:1.75rem;color:green;}
p {font-size:1rem;color:yellow}

}

/* Для устройств более 480px */
@media only screen and (min-width: 480px) {

/* Для обычных устройств */
h1 {font-size:2.25rem;color:indigo;}
p {font-size:1.15rem;color:green;}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 480px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 480px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 481px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 480px),
only screen and (                min-resolution: 192dpi) and (min-width: 480px),
only screen and (                min-resolution: 2dppx)  and (min-width: 480px) {

/* Для дисплеев Retina */
h1 {font-size:2.25rem;color:indigo;}
p {font-size:1.15rem;color:green;}

}

/* Для устройств более 768px */
@media only screen and (min-width: 768px) {

/* Для обычных устройств */
h1 {font-size:2.75rem;color:blue;}
p {font-size:1.30rem;color:gold;}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px),
only screen and (                min-resolution: 2dppx)  and (min-width: 768px) {

/* Для дисплеев Retina */
h1 {font-size:2.75rem;color:blue;}
p {font-size:1.30rem;color:gold;}

}

/* Для устройств более 1024px */
@media only screen and (min-width: 1024px) {

/* Для обычных устройств */
h1 {font-size:3.25rem;color:red;}
p {font-size:1.45rem;color:indigo;}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1024px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1024px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1024px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1024px),
only screen and (                min-resolution: 192dpi) and (min-width: 1024px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1024px) {

/* Для дисплеев Retina */
h1 {font-size:3.25rem;color:red;}
p {font-size:1.45rem;color:indigo;}

}

/* Для устройств более 1280px */
@media only screen and (min-width: 1280px) {

h1 {font-size:4.75rem;color:yellow;}
p {font-size:1.60rem;color:red;}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1280px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1280px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1280px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1280px),
only screen and (                min-resolution: 192dpi) and (min-width: 1280px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1280px) {

/* Для дисплеев Retina */
h1 {font-size:4.75rem;color:yellow;}
p {font-size:1.60rem;color:red;}

}
</style>
</head>
<body>
<h1>Адаптивный заголовок</h1>
<p>Изменения будут происходить если изменять размеры ширины окна браузера. Для начала сузьте окно браузера, и мышкой, удерживая правый или левый край страницы подвигайте, изменяя её ширину. Последнее изменение произойдёт когда размер ширины превысит 1280px, а при размере в 320px будут действовать значения свойств установленных по умолчанию.</p>
</body>
</html>