(I am currently on the new responsive web design course learning basic CSS at step 18)
I broke this code down and looked it up online, it seems like this does what @ media (min-width) can do.
Would I have to use this if I use @ media? The description says the < meta > code and everything else in it is for the stylesheet to look the same everywhere. Does this mean that if I use @media I will have to use
I also don’t 100% understand name = “viewport” , does “viewport” carry any significance or is it just a normal name attribute?
Quite a lot of this is just me guessing and “connecting” stuff together, I fully realise I can be completely wrong about all of this so I really appreciate anyone who is reading this. Also sorry if this doesn’t make a lot of sense, if I need to clear up anything I would be happy to.
@media query is used in CSS file or style style tag to define how your page appears on different media devices for example, on different width/height, different orientation (portrait/landscape), screen readers enabled, speech synthesizers, printers.
using @media query you can style page to look different on different devices.
This line ensures that device browsers grant real device width instead of a larger one at the start. Some devices (cellphones) do this so this line forces them not to.
You need to combine this with the media element though.
The media element uses the width to make design changes (such as shrinking down menus for example on a cell phone or restructuring the layout of a page from a horizontal grid to a vertical one). But without the meta element, it will not work properly (because those tricky devices keep pretending to be bigger than they actually are!)
As for viewports, that refers to the visible space within the browser. On a cell, that includes almost everything you see but in a laptop you can modify the browser so that changes the viewport. (Viewports also change if you hide your menu or your url bar in the browser).