Responsive design is fundamental approach in modern web development aimed at ensuring optimal user experience across wide range of devices and screen sizes. Media queries are indeed useful for modifying the layout or appearance of website based on specific characteristics such as the screen resolution of the device or the width and height of the browser viewport.
I. Media Queries For Responsive Website Design
Media queries are CSS features that allow developers to apply different styles to a webpage based on specific conditions, such as the width and height of the browser viewport, the device's screen resolution, the device's orientation (landscape or portrait), and more. Media queries are used to create responsive designs that adapt and adjust layout, styling, and content presentation based on the user's device characteristics.
Here are examples of media queries targeting specific characteristics such as the screen resolution of the device and the width and height of the browser viewport:
» Screen resolution
/* Apply styles for devices with a screen resolution of 1920x1080 or higher */
@media screen and (min-resolution: 192dpi) {
/* CSS rules */
}
/* Apply styles for devices with a screen resolution between 1024x768 and 1280x800 */
@media screen and (min-resolution: 1024x768) and (max-resolution: 1280x800) {
/* CSS rules */
}
» Browser Viewport Width and Height
/* Apply styles for viewports with a width of 600px or larger */
@media screen and (min-width: 600px) {
/* CSS rules */
}
/* Apply styles for viewports with a height of 800px or smaller */
@media screen and (max-height: 800px) {
/* CSS rules */
}
/* Apply styles for viewports with a width between 768px and 1024px, and a height between 600px and 800px */
@media screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 600px) and (max-height: 800px) {
/* CSS rules */
}
» Aspect Ratio
/* Apply styles for viewports with an aspect ratio of 16:9 */
@media screen and (aspect-ratio: 16/9) {
/* CSS rules */
}
» Orientation
/* Apply styles for devices in portrait orientation */
@media screen and (orientation: portrait) {
/* CSS rules */
}
/* Apply styles for devices in landscape orientation */
@media screen and (orientation: landscape) {
/* CSS rules */
}
In the examples above, we can see that logical operators such as `not`, `and`, `only`, and `or` are used to construct complex media queries. Furthermore, we noticed that `min-width` and `max-width` are frequently used media features. These features enable styles to be determined by the width of the viewport.
There are many units that can offer more flexibility and scalability in certain scenarios, especially when designing media queries.
- px (Pixels): control over element sizes, especially for small components or when exact dimensions are required.
For example:
.element {
width: 200px;
height: 100px;
}
- % (Percentage): create responsive layouts that adapt to changes in the size of the parent container.
For example:
.container {
width: 80%;
}
- em: create layouts that scale proportionally with changes in font size.
For example:
.text {
font-size: 1.2em; /* 1.2 times the font size of the parent element */
}
- rem (Root Em): Rem units are relative to the font size of the root element (<html>), offering a consistent sizing reference.
For example:
html {
font-size: 16px; /* Base font size */
}
.text {
font-size: 1.2rem; /* 1.2 times the base font size */
}
- vw (Viewport Width): create layouts that respond to changes in viewport width, such as fluid typography or scaling elements proportionally.
For example:
.element {
width: 50vw; /* 50% of the viewport width */
}
Additionally, alongside media queries, the Viewport Meta tag significantly influences website responsiveness. It achieves this by adjusting the webpage width to match the device screen and controlling initial zoom levels.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
II. CSS breakpoints for Responsive Design
Breakpoints are the specific conditions (such as max-width and min-width values) within Media Queries where the styles change. They typically signal when major layout shift occurs, such as switching from single-column layout on mobile devices to multi-column layout on tablets and desktops.
Common device sizes: Small devices (smartphones), Medium devices (tablets) and Large devices (desktops) are group-specific names used to categorize breakpoints based on common device sizes.
/* Small devices (phones, 320px to 480px) */
@media (max-width: 480px) {
.container {
display: block;
width: 100%;
}
}
/* Medium devices (tablets, 481px to 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
.container {
display: flex;
flex-direction: column;
width: 80%;
}
}
/* Large devices (desktops, 1025px and up) */
@media (min-width: 1025px) {
.container {
display: flex;
flex-direction: row;
width: 70%;
}
}
Common screen sizes: Typically fall into three main categories: Mobile, Tablets and Desktops.
/* Extra Extra Small (Mobile Portrait) */
@media (max-width: 320px) {
/* CSS rules for screen sizes up to 320px */
}
/* Extra Small (Mobile Landscape) */
@media (max-width: 480px) {
/* CSS rules for screen sizes up to 480px */
}
/* Small (Large Mobile) */
@media (max-width: 640px) {
/* CSS rules for screen sizes up to 640px */
}
/* Medium (Tablet, switches to desktop view in certain themes) */
@media (max-width: 768px) {
/* CSS rules for screen sizes up to 768px */
}
/* Large (Small Desktop) */
@media (max-width: 1024px) {
/* CSS rules for screen sizes up to 1024px */
}
/* Extra Large (Large Desktop) */
@media (max-width: 1440px) {
/* CSS rules for screen sizes up to 1440px */
}
III. Mastering Breakpoints with Top CSS Frameworks
There are several popular CSS frameworks available to support responsive website design by leveraging predefined classes and impactful CSS. Let us explore few of these frameworks and how they can be applied to our website.
Go
III. Video
