How To Create A Responsive Website With HTML & CSS
This tutorial will help you learn how to create beautiful responsive websites
using HTML and CSS. I will explain what a responsive website is and the
methods to create a beautiful responsive website.
Responsive Website?
A responsive website means website that work well on all types of devices.
They change automatically to fit different screen sizes, making them easier
for people on smartphones, tablets, and desktops.
Methods?
1. Using Meta Tag for the Viewport
2. Using Responsive Images
3. Using Responsive Texts
4. Using Media Queries
5. Using Bootstrap Framework
6. Using Responsive Layouts
7. Using Responsive Media
8. Using Meta Tag for the Viewport
Before creating a responsive website, we need to understand the viewport
concept. The viewport is the area of a web page that a user can see. The
size of the viewport changes depending on the device; it is smaller on
mobile phones than on computer screens.
To make your website responsive, include this <meta> tag on every web
page. This sets the viewport for your page. It tells the browser how to
manage the page's size and scaling.
Example 1
The part that says "width=device-width" makes the page's width match the
screen width of the device being used. This width can change depending on
the device. The phrase "initial-scale=1.0" sets the zoom level for the page
when it first loads in the browser.
Using Responsive Images
Responsive images change size based on the browser window. Let's see the
following.
1. Image width in percentage
2. Image max-width in percentage
Image width in percentage
If you set the CSS width to 100%, the image will resize up or down.
Example 2
This can make the image larger than its original size, which is not always
ideal. A better method is to use the max-width property.
Image max-width in percentage
When you set max-width to 100%, the image will shrink if needed, but it
won’t grow larger than its original size.
Example 3
Using Responsive Texts
You can set the text size using "vw" units, which stands for "viewport
width." This means the text size will change based on the size of the
browser window.
Example 4
For example, 5vw means the text is 5% of the viewport width. The viewport is
your browser window size. One VW is 1% of that size. If the viewport is 10cm
wide, 1vw equals 0.1cm.
Using Media Queries
Media queries help make websites responsive by adjusting styles based on the
size of the browser. Media queries can check several things.
1. The width and height of the viewport
2. The width and height of the device
3. The orientation
4. The resolution
Example 5
Here, when the device width is 500 px or less, the div elements share the
same width and colour. When the screen width is greater than 500px,
different colours and widths apply. You can customize these styles as you
wish.
Using Bootstrap Framework
Built-in responsive development packages are also available. Bootstrap is
one among these.
Example 6
Here you need to add external links for Bootstrap CSS and JS and follow the
DOM pattern as given in the example.
Using Responsive Layouts
The responsive layout module in CSS includes several properties.
1.Flexbox Property
2. CSS Grids
3. CSS Multicolumn
Flexbox Property
To make a page responsive, we can use the CSS display property. Layouts like
flexbox, inline, blocks, and grids help create designs that adapt to
different screen sizes. The CSS flexbox property automatically adjusts the
number of columns in a row based on the screen width.
Syntax
.container {
display: flexbox;
}
Example 7
This example uses the flexbox display to adjust items based on sCode
n size.
Note that this method may not always show the correct output on Google
Chrome.
CSS Grids
This method uses a CSS display grid to create a 2D layout with multiple
columns. Unlike Flexbox, which changes the order of columns, CSS Grid keeps
the columns in place and adjusts the content within each column.
Example 8
In this example, CSS Grid layout arranges content in a 2D format with rows
and columns.
CSS MultiColumn
CSS MultiColumn is a layout tool that lets developers create columns for
content, similar to grids. You can set properties like the number of
columns, their width, and the gap between them. These settings stay the
same, but the content inside the columns adjusts to fit.
Example 9
This example shows how to use CSS MultiColumn to divide content into a
specific number of columns.
Using Responsive Media
The last important part of responsive web design is flexible media. As
screen sizes change, media like images and videos should change size too.
Let's check the following.
1. Setting video width to 100%
2. Setting video max-width to 100%
3. Iframe-embedded responsive video
Setting video width to 100%
Here we set the video width to 100% but this will stretch the video.
Example 10
Setting video max-width to 100%
A quick way to make media scalable is by using the max-width property set to
100%. This means that as the screen becomes smaller, the media will also
resize to fit its container.
Example 11
Iframe Embedded Responsive Video
By positioning and adding padding-top value, we can maintain the aspect
ratio of the video. For example, for the 4:3 aspect ratio, we need to set ¾
decimal value as padding-top of the iframe container.
Example 12
Finally 😊
We learned how to create a beautiful responsive website only using HTML and
CSS. The best way is to develop the contents in percentage in order to fit
all viewports. You can maintain the aspect ratio in the case of videos and
setting max-width for images is a good practice. For texts, it's good to use
VW units.
