# The Responsive Design ###### tags: CF-workshops --- ### What is Responsive Design? --- The goal is to make your site beautiful for users on a variety of devices, while minimizing the amount of CSS you need to write. --- Let's see How to apply Responsive Design? 1. Devices Sizes/Break Points  --- 2. Media Queries CSS instructions that are important for creating responsive web pages. The syntax ``` @media screen and (max-width: 600px) { /* Your styles go here */ } ``` lets check [this one](https://replit.com/@yaqoot/Media-Query#index.html) --- 3. Relative Units Relative units, as the name suggests, are always relative to the length/size of another property. A relative unit gets sizing from something else. --- - Percentages %: it sets the width/font-size of the element relative to its parent's width/font-size - rem: it's relative to the root (i.e. HTML) element. This means that 1rem corresponds to the same size everywhere on the page (with font sizes and lengths). - em: this one is a bit tricky, it's relative to the font-size of the element itself when setting lengths but it's relative to the parent element when setting the font-size - vh: it's relative to the viewport's height (ie. 1vh = 1/100 of the viewport's height) - vw: it's relative to the viewport's width (ie. 1vw = 1/100 of the viewport's width) Most browsers specify a root font-size for the pages (16px) --- 4. Responsive images There are two approaches to use images in your web page: - Using the <img /> tag - Setting it as a background for a div --- lets see [Responsive images](https://www.w3schools.com/howto/howto_css_image_responsive.asp)