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 is the practise of utilising 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:
Media Queries: Media queries allow you to apply CSS styles based
on characteristics of the device, such as its width, height, or device
orientation.
Fluid Layouts: Using percentages for widths instead of fixed
pixel values allows elements to resize fluidly with the width of the
viewport.
Flexible Images and Media: Setting the max-width of images and
media to 100% ensures they scale down proportionally on smaller.
Viewport Meta Tag: Specifying the viewport meta tag in the HTML
<head> section ensures proper scaling on mobile devices.
CSS Flexbox and Grid: CSS Flexbox and Grid layouts provide
powerful tools for creating flexible and responsive layouts.
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:
.png)
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:
.png)
.png&description=HTML RESPONSIVE WEB){kind=link}