.portrait {    display:none;}
.landscape {    display:none;}
.ratio2 {    display:none;}

/* #### Mobile Phones Portrait #### */
@media screen and (orientation: portrait)
{
    .portrait {    display:block;float:left;}
}
@media screen and (orientation: landscape)
{
    .landscape {    display:block;float:left;}
}
@media screen and (-webkit-min-device-pixel-ratio: 2)
{
    .ratio2 {    display:block;float:left;}
}
 /* #### Desktops #### */
 @media screen and (max-width: 1200px){
    .portrait {    color:purple;}
    .landscape {    color:purple;}
    .ratio2 {   color:purple;}
 }

  /* #### Desktops #### */
 @media screen and (max-width: 1000px){
    .portrait {    color:blue;}
    .landscape {    color:blue;}
    .ratio2 {   color:blue;}
 }

 /* #### Tablets Portrait or Landscape #### */
 @media screen and (max-width: 768px){
    .portrait {    color:green;}
    .landscape {    color:green;}
    .ratio2 {   color:green;}
 }
 
 /* #### Mobile Phones Landscape #### */
 @media screen and (max-width: 640px){
    .portrait {    color:orange;}
    .landscape {    color:orange;}
    .ratio2 {   color:orange;}
 }

 @media screen and (max-width: 480px){
    .portrait {    color:red;}
    .landscape {    color:red;}
    .ratio2 {   color:red;}
 }




 /* #### Tablets Portrait or Landscape #### */
 @media screen and (max-device-width: 768px){
    .portrait {    color:green;}
    .landscape {    color:green;}
    .ratio2 {   color:green;}
 }
 
 /* #### Mobile Phones Landscape #### */
 @media screen and (max-device-width: 640px){
    .portrait {    color:yellow;}
    .landscape {    color:yellow;}
    .ratio2 {   color:yellow;}
 }

 @media screen and (max-device-width: 480px){
    .portrait {    color:red;}
    .landscape {    color:red;}
    .ratio2 {   color:red;}
 }