HTML RESPONSIVE WEB

Anitha



HTML Responsive Web

A web development technique known as responsive web design (RWD) modifies a website's appearance dynamically based on the screen size and orientation of the device displaying.

RWD is a website made to automatically resize, conceal, reduce, or enlarge using HTML and CSS, ensuring that it looks great across all platforms (desktops, tablets, and phones).

We may add a "viewport" to our webpage to make it responsive. There is no set size for the viewport. It varies based on the sizes and orientations of the screens. The tag in HTML allows you to specify the viewport. 

While your page may become responsive by using these tags, it is always preferable to use the CSS framework and Bootstrap. These make coding easier and offer a better appearance and feel.

Syntax:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Types of Responsive web in HTML

Responsive Web Design of utilizing HTML and CSS to dynamically resize, conceal, shrink, or enlarge a website in order for it to look nice on all devices.

In HTML, responsive web design is primarily achieved through CSS (Cascading Style Sheets). HTML itself provides the structure and content of a webpage, while CSS controls the presentation, including responsiveness. Here are some common techniques used to create responsive web designs:

1. Media Queries: Media queries allow you to apply CSS styles based on characteristics of the device, such as its width, height, or device orientation. 

2. Fluid Layouts: Using percentages for widths instead of fixed pixel values allows elements to resize fluidly with the width of the viewport.

3. Flexible Images and Media: Setting the max-width of images and media to 100% ensures they scale down proportionally on smaller.

4. Viewport Meta Tag: Specifying the viewport meta tag in the HTML <head> section ensures proper scaling on mobile devices.

5. CSS Flexbox and Grid: CSS Flexbox and Grid layouts provide powerful tools for creating flexible and responsive layouts.

6. CSS Frameworks: Utilizing CSS frameworks like Bootstrap or Foundation can provide pre-built components and grids that are inherently responsive.

Making an HTML Responsive Webpage

The element in HTML can be utilised to display responsive images on the webpage. We use viewport width for texts that are responsive. Its unit is "vw." A browser's window size is called a viewport.

Responsive Image

Responsive image that are scale nicely to fit for any browser size. Using the width property is set to 100%, the image will be responsive and scale up an down.

Example:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>Using width property in a percentage value, the image will scale up and down when resizing the browser.</p>
<img src="girl.jpeg" style="width:50%;">
</body> </html>


Output:




Responsive Text Size

The "viewport width" set with a "vw" unit can be used to adjust the text size. In this manner, the text size will match the window's browser size:

Syntax:

<h1 style="font-size:10vw">Hello World</h1>

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:5vw;">Responsive Text</h1>
<p style="font-size:3vw;">Resize the browser window to see how the text size.</p>
<p style="font-size:3vw;">Using the "vw" unit when sizing the text, 10vw will set the size of the viewport width will large size of the text.</p>
</body>
</html>

Output:







More topic in HTML

Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send