Responsive design, also known as adaptive layouts, is based on three main factors:
1. Fluid Layouts:
When creating web page layouts, it's important to use relative length units instead of fixed widths in your CSS. This means using percentages to define sizes.
The formula to convert sizes from a design to percentages is (target/context)x100 = result
For example, to calculate the size of a div on the left in a design like the one above, you would do:
(300px/960px)x100 = 30.25%
The CSS code would then look something like this:
.leftDiv
{
width: 30.25%;
float: left;
}
.rightDiv
{
width: 65%;
float: left;
}
To ensure text resizes automatically, you can use a unit called VW (ViewWidth)
.myText
{
font-size: 1vw;
}
This allows text to resize relative to the view width.
2. Responsive Media:
Images, videos, and canvases should also resize automatically in relation to their parent container.
Example:
img, video, canvas
{
max-width: 100%;
}
This ensures that media elements adjust in size within their parent container.
3. Media Queries:
Media queries are used to define specific CSS statements for different screen sizes. Generally, three media queries are sufficient for desktops, tablets, and phones. Additional queries may not be necessary if fluid layouts and responsive media are implemented correctly.
For more information, visit: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Source: Here