Responsive web design plays a key role in today web development, because today’s websites are not only viewed on desktops and laptops they are also used on different devices and platforms such as mobile and tablets. Using responsive web is the approach that allows the web developer to define the size depending on the users device. As a user switches devices, the website should automatically switch container sizes, image sizes, font sizes, and resolution so the website can now fit on that certain device and still look good.
This is the technique using a CSS style sheet, that allows the web developer to define the changes in the CSS of a website, depending on the size of screen the website is being used on. A Media Querie allows the developer to set the screen sizes that when the website is shrunk down to on a different device, changes the style sheet. Below is an example of the code, where I tested it to create a greater understanding of how it works.
Basically I changed the colours for each screen size, so it can show changes each time the website is used on a different sized device. Below is a screenshot of the site on a desktop, and bellow this screenshot is one of the site resized down to “768px” along side the code with the Media Queire.
Here is the screenshot of the site at “768px” this is what the site would look like on a tablet device, as you can see now it has been used on a smaller screen the media queries has changed the color of the body and re sized the title at the top along with the images.
Here is the code, at the top is the Media Querie, once set you put in brackets next to the querie the set “max-width” in this case it is “768px” so once the screen size has surpassed this max-width that’s when the styling you have placed under the media querie take action, and change the colors and sizes of the content on the website.