CSS responsive web design is a web design approach that makes web pages look good on all devices, regardless of the screen size and resolution¹. CSS responsive web design uses only HTML and CSS to resize, hide, shrink, enlarge, or move the content to fit any screen¹.

To create a responsive website, you need to use the following techniques:

• Setting the viewport: The viewport is the user's visible area of a web page. You can use the tag to set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling². For example: <meta name="viewport" content="width=device-width, initial-scale=1.0"> This will set the width of the page to follow the screen-width of the device and set the initial zoom level to 1.0².

• Responsive images: Responsive images are images that scale nicely to fit any browser size. You can use the CSS width and max-width properties to make the images responsive². For example: /* If the CSS width property is set to 100%, the image will be responsive and scale up and down */ img { width: 100%; } /* If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size */ img { max-width: 100%; height: auto; }

• Media queries: Media queries are useful tools to change the layout of a web page based on different screen sizes and orientations. You can use media queries to apply different styles for different devices³. For example: /* Use a media query to add a breakpoint at 600px: */ @media only screen and (max-width: 600px) { /* For mobile phones: */ .column { width: 100%; } } This will make the column elements stack on top of each other when the screen width is less than or equal to 600px³.