Thoughts on "Responsive Website" Article

The “Responsive Design” article is quite insightful for those who are trying to create websites that would properly display on any screen size. It mentions media queries that one can use to make the website flexible for different screen sizes. The one I was taught in my previous Web Design class were:

@media (max-width: *screen size*px) {

}

@media (min-width: *screen size*px) {

}

In the article, they have “@media screen” but you don’t really need the word “screen” in there; it works fine without it, and it will somewhat shorten your file size albeit not significantly. Other methods that the article listed are very useful to know in case of any errors – also finding what works best for you – but using multiple “@media” can make it difficult to spot the errors.

On a personal experience, I used the @media quite a lot in creating my own portfolio, and it can get a bit confusing if you need to include VERY drastic changes such as in my case where on larger screens, I had a fixed vertical, navigation bar on the left side of the screen while on mobile I split some sections either at the top or bottom, with content in between. In such cases, knowing that I could have just created multiple css and use the

<link rel="stylesheet" type="text/css"   media="screen and (max-device-width: 480px)"   href="shetland.css" />

to load a one of the css files for the specific screen size would’ve been EXTREMELY helpful and would've made everything more neat and organized.