CSS Responsive Design 

<!DOCTYPE html>
<html>
<head>
  <title>CSS Responsive Design Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Desktop styles */
    .container {
      width: 760px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f1f1f1;
    }

    /* Tablet styles */
    @media (max-width: 768px) {
      .container {
        width: 100%;
        padding: 10px;
      }
    }

    /* Mobile styles */
    @media (max-width: 480px) {
      .container {
        padding: 5px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to Our Website</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet
	sapien id justo posuere gravida. Duis vitae vestibulum odio. Nam aliquam
	hendrerit nisl, id tempus nisi facilisis vitae. In hac habitasse platea 
	dictumst. Morbi laoreet nisi at mauris eleifend tincidunt. Nulla facilisi.
	Pellentesque habitant morbi tristique senectus et netus et malesuada
	fames ac turpis egestas.</p>
    <p>Phasellus placerat augue eget purus feugiat lacinia. Integer 
	convallis felis a felis venenatis hendrerit. Proin malesuada 
	viverra arcu in bibendum. Aliquam nec risus at ligula efficitur
	aliquam. In auctor mauris vel nulla cursus venenatis. Proin et 
	lectus sed felis laoreet mattis sed id mauris. Mauris efficitur
	risus non ipsum vulputate fringilla.</p>
    <p>Etiam aliquam auctor tristique. Proin et tortor id enim 
	malesuada lobortis non a odio. Fusce consectetur dignissim enim, 
	sed facilisis est commodo eget. Nam sagittis neque quis velit 
	cursus facilisis. Maecenas vitae rhoncus nulla, vitae lobortis arcu. 
	Donec a dolor finibus, venenatis tortor ac, bibendum tellus.
	Fusce luctus augue libero, vitae malesuada eros iaculis vel.</p>
  </div>
</body>
</html>

Code Output

CSS Responsive Design Example

Welcome to Our Website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet sapien id justo posuere gravida. Duis vitae vestibulum odio. Nam aliquam hendrerit nisl, id tempus nisi facilisis vitae. In hac habitasse platea dictumst. Morbi laoreet nisi at mauris eleifend tincidunt. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Phasellus placerat augue eget purus feugiat lacinia. Integer convallis felis a felis venenatis hendrerit. Proin malesuada viverra arcu in bibendum. Aliquam nec risus at ligula efficitur aliquam. In auctor mauris vel nulla cursus venenatis. Proin et lectus sed felis laoreet mattis sed id mauris. Mauris efficitur risus non ipsum vulputate fringilla.

Etiam aliquam auctor tristique. Proin et tortor id enim malesuada lobortis non a odio. Fusce consectetur dignissim enim, sed facilisis est commodo eget. Nam sagittis neque quis velit cursus facilisis. Maecenas vitae rhoncus nulla, vitae lobortis arcu. Donec a dolor finibus, venenatis tortor ac, bibendum tellus. Fusce luctus augue libero, vitae malesuada eros iaculis vel.

CSS Responsive Design

CSS Responsive design is a technique that allows webpages to automatically adjust and respond to different screen sizes, ensuring an optimal user experience across devices. It involves using CSS media queries, flexible layouts, and fluid images to adapt the content and design of a website based on the viewport size.

    • Media Queries: Media queries are CSS rules that apply different styles based on the characteristics of the device or viewport. They allow you to specify different CSS rules for different screen sizes, resolutions, or device capabilities.
    • Flexible Layouts: Flexible layouts use relative units such as percentages and em to create fluid and flexible designs that can adapt to different screen sizes. This includes using CSS Grid, Flexbox, or a combination of both to create responsive grid systems and flexible page structures.
    • Fluid Images: Fluid images ensure that images scale proportionally with the container and adjust to different screen sizes. This is achieved by setting the max-width: 100% property on the image, allowing it to resize dynamically based on its parent container.
    • Viewport Meta Tag: The viewport meta tag is a crucial component of responsive design. It sets the initial scale, width, and behavior of the webpage on mobile devices. By including the viewport meta tag in the <head> section of your HTML document, you can control how the webpage is displayed on different devices.