![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/html-responsive-df.jpg\")
<\/a><\/p>\nDeveloping responsive web design is not only about the aesthetic appeal of the layout for different devices, it is also about enhancing the usability. If a website is properly designed to match a specific gadget, then people are likely to spend more time on that site and go through the content. This in return can make the engagement rates higher and the conversion metrics even better. Also, the use of responsive design is advisable in SEO because the search engines rank websites that are friendly to users across devices high.<\/p>\n
For an overall user-friendly experience, it is thus essential to adapt our web-pages to different devices. For example,<\/p>\n
Desktop<\/strong><\/p>\n Tablet<\/strong><\/p>\n Phone<\/strong><\/p>\n As discussed in the previous articles, the <meta> tag of the head is useful to create a viewport for a website.<\/p>\n Output-<\/strong><\/p>\n As we can see, the web-page\u2019s scaling is controlled by the browser using the meta viewport.<\/p>\n Images that fit well within an HTML document, precisely with scale, are responsive images. The width of the image is set to 100% to make it responsive.<\/p>\n Output-<\/strong><\/p>\n When the user opens a webpage, images adapt to fit the screen size, thus the appearance of the webpage is good, this is accomplished with the help of CSS. This is especially the case for business to consumer sites where, for example, product images have to be sharp and well-defined across different screens.<\/p>\n Responsive images also help in cutting down the loading time since, for instance, a small device will only download a small image, which will improve the user experience immensely.<\/p>\n The max-width property set to 100% enables scaling of the image down its original size, if required. It is never scaled up to its original size.<\/p>\n For example:<\/b><\/p>\n Output-<\/strong><\/p>\n The picture element is useful for displaying different images for different devices(of different sizes).The picture element contains <source> elements that have the attributes related to the most suitable image. The <source> element contains different sources of images, each for a particular fit of the current device. For example,<\/p>\n Output-<\/strong><\/p>\n We can make text-size responsive using the \u2018vw\u2019 units (viewport width). The text-size varies according to the browser\u2019s window size.<\/p>\n Output-<\/strong><\/p>\n We can set different styles for the web-page on different browsers using media queries. In the following examples, the orientation of three div elements is changed as per the browser\u2019s size.<\/p>\n Output-<\/strong> After-<\/p>\n One of the most popular web-pages is Bootstrap. It uses HTML,CSS and jquery.<\/p>\n Output-<\/strong> <\/p>\n After-<\/p>\n W3.CSS stylesheet is also to make responsive web-pages. For Example<\/p>\n Output-<\/strong> After-<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nHTML Responsive Methods<\/h2>\n
1. Setting Viewport in HTML<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n<h2>Viewport<\/h2>\r\n<p>Try to run this code on different websites.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n2. HTML Responsive Images<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n<h2>Responsive Image<\/h2>\r\n<p>The image will scale up and down when resizing the browser window.Resize the browser window.<\/p>\r\n<img src=\"images\/landscape.jpg\" style=\"width:100%;\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nUse of max-width property in HTML<\/h4>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n<h2>Responsive Image<\/h2>\r\n<p>\"max-width:100%\" does not allow the image to get bigger than its original size. However, if the browser window is made smaller, the image will scale down.<\/p>\r\n<p>Resize the browser window to see the effect.<\/p>\r\n<img src=\"landscape.jpg\" style=\"max-width:100%;height:auto;\">\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
<\/a><\/p>\n3. Show different Images depending on the Browser\u2019s width in HTML<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<\/head>\r\n<body>\r\n<picture>\r\n<source media=\"(min-width: 650px)\" srcset=\"mountain.jpg\">\r\n<source media=\"(min-width: 465px)\" srcset=\"river.jpg\">\r\n<img src=\"landscape.jpg\">\r\n<\/picture>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n4. HTML Responsive Text Size<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<\/head>\r\n<body>\r\n<h1 style=\"font-size:10vw;\">Responsive Text<\/h1>\r\n<p style=\"font-size:5vw;\">Resize the browser window.<\/p>\r\n<p style=\"font-size:5vw;\">10vw will set the size to 10% of the width of viewport.<\/p>\r\n<p>1vw = 1% of viewport width.So,if the viewport is 25cm wide, 1vw is 0.25cm.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\n5. HTML Media Query<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n* {\r\n box-sizing:border-box;\r\n}\r\n.left {\r\n background-color:#42f5a4;\r\n padding:20px;\r\n float:left;\r\n width:20%; \r\n}\r\n.main {\r\n background-color:#f1f1f1;\r\n padding:20px;\r\n float:left;\r\n width:60%; \r\n}\r\n\r\n.right {\r\n background-color:#e342f5;\r\n padding:20px;\r\n float:left;\r\n width:20%; \r\n}\r\n\/* media query to add a break point at 800px: *\/\r\n@media screen and (max-width:800px) {\r\n .left, .main, .right {\r\n width:100%; \/* The width is 100%, when the viewport is 800px or smaller *\/\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>Media Queries<\/h2>\r\n<p>Resize the browser window.<\/p>\r\n<p>Reach the breakpoint at 800px.<\/p>\r\n<div class=\"left\">\r\n <p>Left<\/p>\r\n<\/div>\r\n<div class=\"main\">\r\n <p>Main<\/p>\r\n<\/div>\r\n<div class=\"right\">\r\n <p>Right<\/p>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\nBefore-<\/p>\n<\/a><\/p>\n<\/a><\/p>\nHTML Frameworks<\/h2>\n
1. Bootstrap<\/h3>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<title>Bootstrap<\/title>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.0\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n <div class=\"jumbotron\" style=\"color: blue;\">\r\n <h1>Bootstrap Page<\/h1>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\">\r\n First\r\n <\/div>\r\n <div class=\"col-sm-4\">\r\n Second\r\n <\/div>\r\n <div class=\"col-sm-4\">\r\n Third\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\nBefore-<\/p>\n<\/a><\/p>\n<\/a><\/p>\n2. W3.CSS<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/www.w3schools.com\/w3css\/4\/w3.css\">\r\n<body>\r\n\r\n<div class=\"w3-container w3-green\">\r\n <h1>HTML responsive<\/h1>\r\n <p>Resize this responsive page!<\/p>\r\n<\/div>\r\n\r\n<div class=\"w3-row-padding\">\r\n <div class=\"w3-third\">\r\n <h2>Delhi<\/h2>\r\n <p>Delhi is the capital city of India.<\/p>\r\n <p>It is the most populous city in India,\r\n with a metropolitan area of over 13 million inhabitants.<\/p>\r\n <\/div>\r\n\r\n <div class=\"w3-third\">\r\n <h2>Paris<\/h2>\r\n <p>Paris is the capital of France.<\/p>\r\n <p>The Paris area is one of the largest population centers in Europe,\r\n with more than 12 million inhabitants.<\/p>\r\n <\/div>\r\n\r\n <div class=\"w3-third\">\r\n <h2>Tokyo<\/h2>\r\n <p>Tokyo is the capital of Japan.<\/p>\r\n <p>It is the center of the Greater Tokyo Area,\r\n and the most populous metropolitan area in the world.<\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\nBefore-<\/p>\n<\/a><\/p>\n