Css media queries for various resolutions - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Media

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Media

Description

Css media queries for various resolutions

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.test {<!--from www  .ja  va  2  s .co  m-->
   display:table-cell;
   vertical-align:middle;
   text-align:center;
   height:201px;
   background-color:Chartreuse;
   color:yellow;
   font-family:Helvetica;
   box-sizing:border-box;
   padding:51px;
   width:401px;
}

@media only screen and (min-width: 320px) and (max-width: 959px)  {
   .test::before {
      content:'321px - 960px';
   }

}

@media only screen and (min-width: 960px) and (max-width: 1023px)  {
   .test::before {
      content:'961px - 1024px';
   }

}

@media only screen and (min-width: 1024px) and (max-width: 1359px)  {
   .test::before {
      content:'1025px - 1360px';
   }

}

@media only screen and (min-width: 1360px) and (max-width: 1439px)  {
   .test::before {
      content:'1361px - 1440px';
   }

}

@media only screen and (min-width: 1440px) and (max-width: 1919px)  {
   .test::before {
      content:'1441px - 1920px';
   }

}

@media only screen and (min-width: 1920px) and (max-width: 2499px)  {
   .test::before {
      content:'1921px - 2500px';
   }

}

@media only screen and (min-width: 2500px) and (max-width: 3839px)  {
   .test::before {
      content:'2501px - 3840px';
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div class="test"></div>  
 </body>
</html>

Related Tutorials