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 to100%, 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>
<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> <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%;">
</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)
More topic in HTML
.png&description=HTML RESPONSIVE WEB){kind=link}