How to Use Media Queries in CSS – Responsive Web Design

Media Query, not an old word for web developers. A website must meet the guidelines of responsive technology and devices friendly. The responsive design can be achieved with multiple media queries depend on design. How to work with different media queries viewport (width and height of device) in CSS. 8 examples of media queries and […]

Share

Media Query, not an old word for web developers. A website must meet the guidelines of responsive technology and devices friendly. The responsive design can be achieved with multiple media queries depend on design. How to work with different media queries viewport (width and height of device) in CSS. 8 examples of media queries and how to restrict CSS and change the flow of website on targeted browsers.

Technology fit website becomes the first priority for every organization even small or large. Be aware while hiring don’t forgot to ask for responsive.

Media Queries in CSS:

  • @media (max-width: 480px) //………………less than or equal to 480px
  • @media (min-width: 481px) // ………………. less than or equal to 481px
  • @media (max-width: 767px) //……………….. less than 768 pixels goes here
  • @media (min-width: 768px) and (max-width:1024px) // ………. for ipads
  • @media (min-device-width: 768px) and (max-device-width: 1024px) //…….ipad with double density

Mobile:

@media (max-width: 480px) {
  // CSS that only applies to viewports.
  // less than or equal to 480 pixles goes here.
}

Not Mobile:

@media (min-width: 481px) {
  // CSS that only applies to viewports. 
  // greater than 480 pixels goes here.
}

Small Tablet:

@media (max-width: 767px) {
  // CSS that only applies to viewports. 
  // less than 768 pixels goes here.
}

iPad:

@media (min-width: 768px) and (max-width:1024px) {
  // CSS that only applies to viewports. 
  // of similar size to the ipad goes here.
}

Desktop:

@media (min-width: 1025px) {
  // CSS that only applies to viewports. 
  // greater than 1024 pixels goes here.
}

iPad Retina

@media (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  // CSS that only applies to viewports. 
  // of similar size to the ipad. and 
  // with double pixel density goes here.
}

Explore more media queries chapter on here.

Responsive Frameworks:

While reading above use frameworks which only needs to remember classes. Bootstrap is a famous framework which leads you to responsive website design. Make website responsive with Bootstrap.

Responsive Requirement – Search Engine Design

Search engine optimization include mobile friendly test. Even though recent update of google was displaying mobile friendly text below search result. Google also include their insight checker of website which also test your mobile friendly website score.

Responsive Interview Question:

Web development companies while hiring an employee ask question about CSS responsive design. A front end designer must have the knowledge of media queries. While Preparing for your next interview read this article before.

Leave a Reply

Your email address will not be published. Required fields are marked *