How to create and test a webpage meant for Retina display?

We can write a responsive webpage using Media Queries to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices from desktop computer monitors to mobile phones.

<!-- show this div when the display is not a retina display -->
<div class="box box-non-retina">
   <h2>Non-Retina</h2>
</div><!-- end desktop -->

<!-- show this when it is a retina display -->  
<div class="box box-retina">
   <h2>Retina</h2>
</div><!-- end tablet -->

Next, we need to write some Media Queries in the css file to display the div responsively according the attribute of display devices.

/* Media Queries */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (   -moz-min-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) { 
           
           .box-non-retina {
               display: none;
           }
           
           .box-retina {
               display: block;
           }
}

See? It is easy. But how can we check if it works? The simplest way is to test it with Firefox.

• In the Firefox address bar, type about:config and press the Enter key. 
• Search for the layout.css.devPixelsPerPx preference.
• Change it to your desired ratio ( 1 for normal, 2 for retina)

After setting the ratio,  you can verify if the css code works. You can also test your other responsive design with Firefox Responsive Design View by selecting "Responsive Design View" from the Web Developer submenu in the Firefox Menu.