Media Queries CSS for All Devices

 Media Queries CSS for All Devices

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

iPad and Smartphone Orientation Code

For Android, if you use elements with display set to box, you can order the child nodes for either vertical or horizontal. If no orientation is provided, the box defaults to vertical.

#androidorientation {
    display: -webkit-box;
-webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
}

The iPad  orientation property.

@media screen and (orientation: landscape) {
     .apple-landscape {
          width: 30%;
          float: right;
     }
}

@media screen and (orientation: portrait) {
     .apple-portrait {
          clear: both;
     }
}

 

For All Device ( Just Copy and Paste Code )

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* STYLES GO HERE */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* STYLES GO HERE */

}

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* STYLES GO HERE */

}

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* STYLES GO HERE */

}

/* iPads (landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* STYLES GO HERE */

}

/* iPads (portrait) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* STYLES GO HERE */

}

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* STYLES GO HERE */

}

/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* STYLES GO HERE */

}

/* iPhone 5 (portrait &amp; landscape)----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px) {

/* STYLES GO HERE */

}

/* iPhone 5 (landscape)----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : landscape) {

/* STYLES GO HERE */

}

/* iPhone 5 (portrait)----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : portrait) {

/* STYLES GO HERE */

}

if above not word don't worry just follow this one..
   -- csss for desk --

Portrait:

   @media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
   body {
      padding: 0 !important;
   }
   .infoShowWrapper {
      width: 268px;
  }
   .heroImage {
      margin-top: 0;
      height: 200px;
      width: 100%;
      background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
  }
  .navbar-fixed-top {
      margin: 0 !important;
  }
  .box-item {
      width: 280px;
  }
  .seaBkg {
      background-image: url(assets/images/mare_2x.jpg);
  }
}

Landscape:

   @media only screen and (min-device-width: 480px) and (max-device-width: 640px) {
   body {
       padding: 0 !important;
   }
   .heroImage {
       margin-top: 0;
       height: 200px;
       width: 100%;
       background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
   }
   .navbar-fixed-top {
       margin: 0 !important;
   }
   .box-item {
       width: 440px;
   }
   .infoShowWrapper {
       width: 440px;
   }
   .seaBkg {
       background-image: url(assets/images/mare_2x.jpg);
   }

}