CSS RWD (Responsive Web Design)

CSS RWD (Responsive Web Design)

CSS RWD stands for “Cascading Style Sheets Responsive Web Design.”
It's an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
This is achieved by using flexible layouts, resizable images, and media queries.

Cascading Style Sheets (CSS)

CSS is a stylesheet language used to control the look and formatting of a document written in HTML or XML. It allows you to apply styles (such as fonts, colors, spacing) to web documents.

Responsive Web Design (RWD)

This approach aims to craft sites that provide an optimal viewing experience, easy reading, and navigation across a wide range of devices, from desktop computer monitors to mobile phones.
RWD is achieved by:

Flexible Grid Layouts: Layouts are designed to adapt to the screen size by using percentages rather than fixed units like pixels.
Resizable Images: Images are also resized relative to the container or viewport so they don't break the layout on smaller screens.
Media Queries: These allow the page to use different CSS style rules based on the characteristics of the device being used to view the page (e.g., its width, height, resolution).

Together, CSS and RWD principles enable web developers to create web pages that look good and function well on any device, improving user experience and accessibility.

Hello World Example

css-rwd-hello-world.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Hello World</title>
</head>
<body>
    <div class="container">
        <h1>Hello, World!</h1>
    </div>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
 
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
 
@media only screen and (max-width: 600px) {
    h1 {
        font-size: 18px;
    }
}

Viewport settings

The <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> tag is an essential part of responsive web design and is used in the HTML <head> section to control the viewport's size and scaling.

Tag description

name=“viewport”: This part identifies the meta tag as defining settings for the viewport, which is the user's visible area of a web page.
width=device-width: This part sets the width of the viewport to match the screen's actual width in device-independent pixels, essentially telling the browser to match the screen's width in CSS pixels. It helps to ensure that the content is rendered to match the screen size of the device.
initial-scale=1.0: This part sets the initial zoom level when the page is first loaded. A value of 1.0 means that no zoom is applied, so the content is rendered at its natural size. Setting it to this value ensures that the content will be displayed at the correct size, according to the CSS and layout design, on different devices.

The inclusion of this meta tag helps to optimize the display for different devices and ensures that the responsive design techniques applied via CSS work as intended. Without this tag, some mobile browsers might default to a viewport width that is wider than the device, causing the page to render as a scaled-down version of the full desktop site. By including this tag, the developer instructs the browser to render the content in a way that is more suitable for the screen's actual size, providing a better user experience on mobile and other small-screen devices.

Media query description

The @media rule is used in CSS to apply styles only when certain conditions are met. It's a cornerstone of responsive web design, allowing developers to create different layouts for different devices or screen sizes.

Here's what the specific rule @media only screen and (max-width: 600px) means:

@media: This is the introduction to a media query, telling the browser that the following conditions will define when certain styles are applied.
only screen: This part restricts the styles inside the media query to screen devices only. It ensures that the styles are not applied to other media types like print. The word only is used to prevent older browsers that don't support media queries with media features from applying the given styles.
(max-width: 600px): This is the condition that must be met for the styles inside the media query to be applied. In this case, the styles will be applied to screens that are 600 pixels wide or less.

This means that if you are viewing the website on a device or window that is 600 pixels in width or narrower, the CSS rules inside this media query will take effect.

Table of Contents