Skip to content

Responsive Web Design

Concept

Design once, universally applicable.

Method

Allow automatic adjustment of webpage width

Add the following code to the head of the webpage:

<meta name="viewport" content="width=device-width, initial-scale=1" />

This line of code is included in the automatically generated HTML5 framework.

Do not use absolute width

Use width: xx%; or width: auto; instead of width: xxx px;

Use relative font sizes

Specify the font size as 100% of the default size of the page, which is 16 pixels:

body { font: normal 100% Helvetica, Arial, sans-serif; }

Then specify the h1 size as 1.5 times the default size, which is 24 pixels:

h1 { font-size: 1.5em; }

Fluid grid layout

The positions of each section are floating, not fixed.

.main {
    float: right;
    width: 70%;
}

.leftBar {
    float: left;
    width: 25%;
}

The advantage of float is that if the width is too small to accommodate two elements, the following element will automatically scroll below the previous element, avoiding horizontal overflow and the appearance of horizontal scrollbars.

Try to avoid using absolute positioning (position: absolute).

Selective CSS loading

If the screen width is less than 400 pixels (max-device-width: 400px), load the tinyScreen.css file:

<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

If the screen width is between 400 pixels and 600 pixels, load the smallScreen.css file:

<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

Fluid images

img { max-width: 100%;}

References and Acknowledgements

Original: https://wiki-power.com/
This post is protected by CC BY-NC-SA 4.0 agreement, should be reproduced with attribution.

This post is translated using ChatGPT, please feedback if any omissions.