I have just completed the FCC Responsive Web Design projects.
In my previous article I talked about how I completed the first two, since then I have move on to completing the remaining three (Product landing page, Technical Documentation page and Personal Portfolio page).
The use of media queries was non-negotiable for those remaining projects as it is stated in the user story.
Based on my understanding, Media queries helps to specify different styles to browser and device sizes. That way the layout on a desktop could be different from a mobile device to enhance responsiveness.
After I wrote the HTML and CSS for each projects, they look great from the desktop point of view but when I adjusted to the mobile view I discovered that the pages are out of the normal flow.
This is where media queries comes in, where I had to write different CSS to adapt to the size of devices.
There are different ways to add media queries to your code. One way to do it is you add it directly inside the existing style sheet using @media rule, another way is importing a new style sheet using the @import rule or linking a separate style sheet from within the HTML document.
Using the @media rule is generally recommended to prevent additional HTTP request.
However when adding media queries to the existing style sheet, it should be noted that the code are to be added at the bottom because CSS renders the file from top to bottom.
I look forward to building more responsive web pages using media queries in other to enhance my skills.
Top comments (0)