CSS Media Queries


Without changing your markups, you can configure the appearance of your web pages for a specific range of devices such as cell phones, tablets, and desktops. A media query is made up of a media type and one or more expressions that fit the type and conditions of a specific media function like device width or screen resolution.

Since media query is a logical expression, it can either be true or false. If the media form defined in the media query matches the type of device on which the document is being shown, and all of the media query's expressions are satisfied, the query's result will be valid.



/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
  /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
  /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
  /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
  /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
  /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
  /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
  /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
  /* styles */
}


Adapting Column Width to Panel Dimensions


To provide the best viewing experience for users on different devices, you can use the CSS media question to adjust the web page width and related elements.

Based on the screen or viewport size, the following style rules will automatically adjust the width of the container feature. If the viewport width is less than 768 pixels, it will occupy 100% of the viewport width; if it is greater than 768 pixels but less than 1024 pixels, it will be 750 pixels wide; and so on.



.container {
  margin: 0 auto;
  background: #f2f2f2;
  box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
  .container {
    width: 100%;
    padding: 0 10px;
  }
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
  .container {
    width: 750px;
    padding: 0 10px;
  }
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
  .container {
    width: 980px;
    padding: 0 15px;
  }
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
  .container {
    width: 1200px;
    padding: 0 20px;
  }
}
Live Demo!


Adapting Layouts with Different Screen Sizes


With a little customization, you can use the CSS media question to make your multi-column website layout more adaptable and sensitive for devices.

If the viewport size is greater than or equal to 768 pixels, the following design rule will create a two-column layout, but if it is less than that, it will be made as a one-column layout.



.column {
  width: 48%;
  padding: 0 15px;
  box-sizing: border-box;
  background: #93dcff;
  float: left;
}
.container .column:first-child{
  margin-right: 4%;
}
@media screen and (max-width: 767px){
  .column {
    width: 100%;
    padding: 5px 20px;
    float: none;
  }
  .container .column:first-child{
  margin-right: 0;
  margin-bottom: 20px;
  }
}
Live Demo!