Fluid Design
The first thing to realize about Responsive design is to make sure your website is fluid. What that means is that your website components should scale with your screen size. The way you start to make your site fluid, is by using percentages for your height and width instead of static pixel sizes. This way when someone resizes their browser window, your html tags will shrink or expand accordingly instead of breaking the page.
The following will scale based on the percentage of your screen.
div {
width: 25%;
height: 50%;
}
@media Breakpoints
The second thing you want to add to your arsenal is to create @media breakpoints in your CSS file. This will cause your CSS file to use different CSS styles based on the screen size of the device its on.
However for you to first be able to use them, make sure you add the following meta tag in between your tags in all you .html files.
The following line of code is a @media breakpoint:
@media screen and (max-width: 480px) {
/* CSS Code for when the screen size is 480px Screen size */
}
That line will cause every screen at 480px width and below to apply the CSS code between the curly brackets to your website. This way if your website is on a mobile device, which is usually less then 480px wide, will apply those css styles to itself.
Just to make sure you understand how to use them I’ll give an example. The following lines of code will cause all div to be blue and will then they will turn green as soon as it’s window size is below 780px.
