HTML – Responsive

Responsive design in HTML is the concept that fits the HTML element according to device size for every screen size. Those elements should look perfect in every device like mobile, desktop or tablet. 

Responsive design is the thing in which element gets quickly adjust as per available space in the display view. It based on things like viewport width, text size, responsive image, and other elements. 

Nowadays there are many new techniques involved in responsive designing term to perfect suits design with different browsers as well as devices. Media queries are one of the best part including in responsive design trough CSS, which tells the browser to get adjusted as per their user’s device size


Setting Viewport

It is used to set the viewport to the user page view, which helps the browser to control the dimensions of the webpage along with its scaling. It will automatically adjust elements as per different device sizes and display screens as per the device.

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

Responsive Images

Images which can be scaled nicely to fit any browser size are known as responsive images.

Example

<body>
      <h2>Responsive Image</h2>  
      <p>When we set the CSS width property to 100%, it makes the image responsive.    
      Resize the browser window to see the effect.</p>  
      <img  src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png"> 
</body>

A problem with the above method (width: 100%) is that the image can be scaled up to be larger than its original size. So, it is better to use the max-width property instead.


Set Max-Width Property

It is same as width one can able to set max-width of the element to the 100 %, so it will us to display all our HTML elements into the proper responsive format.

<body>
    <h2>Responsive Image</h2>  
    <p>When we set the CSS max-width property to 100%, it makes the image responsive.    
    Resize the browser window to see the effect.</p>  
<img  src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" style=" max-width:100%; height:auto; ">
      
</body> 

Responsive Text

Same as another element it is necessary to make text also responsible in all devices as per their screen size. It can be set by using VW which helps the user to set viewport width so it can easily adjust the text size as per device screen. 

This syntax explains that viewport is referred to as the browser display size. here 1 VW is equal to actual 1 % of the viewport width.

<body>
      <h1 style="font-size:8vw;">Here size is 10vw.</h1>  
      <p style="font-size:6vw;">Here size is 6vw.</p>  
      <p style="font-size:4vw;">Here size is 4vw.</p>  
      <p>Resize the browser window to see how the text size changes.</p>   
</body>

Viewport specifies the browser window size. 1vw = 1% of viewport width. Means, if the viewport is 100cm wide, 1vw is 1.0cm.


Using Media Query

Media query plays an important role into the responsive designing to make text, image and other elements more responsive for different device size and for different browsers sizes. There are different frameworks available nowadays to make our webpage more responsive. They are like:

  • Responsive Stylesheet: This framework helps us to use different stylesheets framework like W3. CSS which takes the main role while creating a responsive design. By default, it supports to mobile-first design. It is easy to learn & develop.
  • Bootstrap: It is the most popular framework which is growing rapidly and also available freely to the user. It is more user-friendly than another framework because it’s based on web development languages like HTML, CSS, and JQuery which helps to make web pages more responsive.
  • Latest Responsive CSS: It supports various kinds of browsers as well as all types of devices like smartphones, tablets, laptops, etc.