More than half of web pages viewed are done so on a mobile device. Therefore, it is a vital part of modern web design to build websites and applications that will look good on desktops as well as on mobile devices. Read on to find out how to use media queries to implement responsive web designs in your applications.
Responsive web design is an approach that makes web pages render well on a variety of devices and screen sizes. One tool we use to help build responsive web designs is the media query. Media queries are filters that can target and apply style rules or style sheets to specific devices, screen sizes, and device orientations. By using media queries to apply style rules, we can add breakpoints that will allow the content to fit the screen size. For small screen sizes, we stack the content in blocks with additional whitespace between items. As the screen width increases, we expand the layout to multiple columns of stacked content.
Out of the several items that can be used to query by, the items used most often are min-width, max-width, min-height, and max-height. Min-width rules are applied for any browser width greater than the value defined in the query. Max-width rules are applied for any browser width less than the value defined in the query. Min-height rules are applied for any browser height greater than the value defined in the query. Max-height rules are applied for any browser height less than the value defined in the query. Through a combination of these values and screen orientations, we can ensure our design adapts to any device.
Media Queries in CSS
/* ------ Min-width ------ */
@media only screen and (min-width: 768px) {
/* Styles */
}
/* ------ Max-width ------ */
@media only screen and (max-width: 320px) {
/* Styles */
}
/* ------ Min-height ------ */
@media only screen and (min-height: 1024px) {
/* Styles */
}
/* ------ Max-height ------ */
@media only screen and (max-height: 680px) {
/* Styles */
}
/* ------ Device orientation ------ */
@media only screen and (min-width: 768px) and (max-width: 1024)
and (orientation: portrait) {
/* Styles */
}
Media Queries in HTML
<!-- Apply style sheet with media query -->
<head>
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen and (min-width: 768px)
and (max-width: 1024px)
and (orientation: portrait)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen and (min-width: 768px)
and (max-width: 1024px)
and (orientation: landscape)">
</head>
Need help implementing responsive web design in your application? We can help.
