Why including a <link> in <head> fixed the media query not working problem?

Please Help me!
I designed a media query that went like this @media (max-width: 480px) { ...} for mobile devices, and after this query I dropped the styles that will be applied to any viewport size. However, the media queries were not working and I am not sure why. I looked up the web and found a solution - including <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> fixed the problem.
I am puzzled:

  • What is this line doing in my code?
  • and, I have read on MDN that device-width is an obsolute and no longer garanteed to work, so is this piece of code obsolute?

my whole code can be found on this github repo.

PS: I am beginner in web-design. But I do have some background in programming .

@media (max-width: 480px){ }

480-means that if the width of the browser window is less than 480px. For example: @media (max-width: 650px){ flex-direction: column;} - the elements will be rearranged into a column(for flexbox), if the width is less than 650px. In your case 480px.
The viewport meta tag was developed by Apple to indicate to the browser at what scale it is necessary to display the visible area of the web page to the user. In other words, meta viewport is designed to make web pages display (look) correctly (correctly) on smartphones. Viewport предназначен для адаптивной разметки.
width=device-width responsible for ensuring that the width of the visible area of the web page is equal to.
initial-scale-sets the initial scale of the web page.
initial-scale=1 - A value of 1 means that the scale is 100%.

I see. But if viewport meta tag is this important shouldn’t it be taught in web design course.
I mean what will be the point of media queries if they don’t work without a viewport meta

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.