Responsive design

Responsive design is a web design approach that allows web pages to adapt to different screen sizes and resolutions. It enables web pages to be viewed on a variety of devices, including desktops, laptops, tablets, and mobile phones, without compromising the user experience. One of the key tools used to create responsive designs is media queries.

Media queries

Media queries are CSS rules that allow you to apply different styles to an HTML element based on the device’s screen size or orientation. They use the @media rule to specify a set of CSS properties that should be applied when certain conditions are met. Media queries typically have a set of minimum and maximum values for screen width, height, and aspect ratio.

Here’s an example of how to use media queries to create a responsive design:

HTML:

<div class="container">
  <h1>Welcome to my website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS:

container {
  width: 80%;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

In this example, we’ve defined a container class with a width of 80% and centered it using the margin property. We’ve then used a media query to apply different styles to the container class when the screen width is 768px or less. When the screen width is 768px or less, the container class will have a width of 100% and a padding of 10px.

By using media queries in your CSS, you can create a responsive design that adapts to different screen sizes and ensures that your web page is easy to read and navigate on all devices.

Click hear for Responsive design with Media queries example

Also check WHAT IS GIT ? It’s Easy If You Do It Smart

You can also visite the Git website (https://git-scm.com/)