Buzz
Before delving into understanding Responsive Web Design in HTML, readers along with Mytour will explore what Responsive Web Design is.
Article Contents:
1. What is Responsive Web Design?
2. Setting up Viewport
3. Responsive Images
3.1. Using the width attribute
3.2. Using the max-width attribute
3.3. Displaying different image sizes
4. Responsive Text Size
5. Media Query in HTML
6. Frameworks in Responsive Web Design
1. What is Responsive Web Design?
Responsive Web Design utilizes HTML and CSS to automatically adjust the size, hide, shrink, or enlarge a website to ensure the interface is suitable and visually appealing on various devices with different screen sizes, such as computers, mobile phones, and more.
2. Setting up Viewport
When creating a website that is compatible across all devices with different screen sizes, we add the meta element to all web pages.
Example 1: The following example illustrates how to set up the viewport:
The returned result appears as follows:
By setting up the Viewport to provide instructions to the browser on how to control the size and scale of the page.
Example 2: Below is an illustration of a webpage without the viewport meta tag (on the left) and a webpage with the viewport meta tag (on the right):
3. Responsive Images
Responsive images are images that can dynamically adjust their size to fit the screen size of various devices.
3.1 Using the width attribute
If the CSS attribute width is set to 100%, the image size can be larger or smaller, adapting across browser windows on devices with different screen sizes.
Example: In the example below, the CSS attribute width is set to 100%:
The returned result appears as follows:
Note that in the example above, the image may be resized smaller than the original image size. In some cases, we may use the max-width attribute instead.
3.2. Using the max-width attribute
If the max-width attribute is set to 100%, the image will be resized to fit the screen size of devices but not larger than the original image size.
Example: In the example below, the CSS attribute max-width is set to 100%:
The returned result appears as follows:
3.3. Displaying different image sizes
The picture element in HTML allows users to specify different image sizes to fit various browser window sizes.
Example: In the example below, we can specify different image sizes to fit various browser window sizes:
The returned result appears as follows:
4. Responsive Text Size
Text size can be adjusted using the unit 'vw', which stands for 'viewport width' (the width of the viewport).
This way, the text size will adapt, fitting the size of browser windows on different devices.
Example: Below is an example of Responsive Text Size:
The returned result appears as follows:
Note: The Viewport is the browser window size, where 1vw equals 1% of the viewport width. If the viewport width is 50 cm, 1vw is 0.5cm.
5. Media Query in HTML
In addition to changing text and image sizes, on Responsive Web Pages, we also often utilize Media Queries.
With Media Queries, we can define different styles for different browser window sizes.
Example: In the example below, we can adjust the browser window size to view 3 div elements displayed horizontally on large screens and vertically on small screens:
The returned result appears as follows:
6. Frameworks in Responsive Web Design
Bootstrap
Bootstrap is a widely used framework, employing HTML, CSS, and jQuery to create Responsive Web Pages.
Example: The example below illustrates how to use bootstrap in HTML:
The returned result appears as follows:
In this article, Mytour has just introduced you to Responsive Web Design in HTML. In the following articles, Mytour will further introduce you to the Computer Code element in HTML.
