From what I understand I should set a meta tag in the header as mentioned below, use min-width(or min-device-width?) values in media queries building up from the smallest supported size and adding additional CSS via the queries for larger sizes, anything specific to the smallest size only could be defined in a max-width query.
I should also use column classes in my html provided from a grid framework which will apply % width values to my elements/components based on the value of the column class in use(media queries can change this). I'm planning on using Susy with Breakpoint (Sass libs), I'm not sure if Flexbox is a better option.
Choices aside the fluid approach with breakpoints via media queries to alter the layout for smaller screens(or browser windows) is what I'm trying to pickup, though some resources I've been pointed to seem a bit outdated or varying advice/opinions. Please confirm if so far what I've said is fine or if I've misunderstood anything.
1) With the meta tag mentioned, do PX values translate to a consistent physical size(regardless of pixel density) across screens? And is the width property being set the same property width property that Media Queries can also reference?(So it'd now be equal to device-width, or the original value is still referenced?)
2) With regards to being responsive, should I be using PX units? It seems to be suggested and used in many articles these days that I come across, though older ones a few years back were pushing EM/REM units. I've read that fonts defined with PX units don't change if a user adjusts the browsers default font size, but fonts with %/EM/REM sizes do....however EM units can be problematic due to the relative nature if you have parent elements also sized with EM units? REM I don't know too much about yet, other than it wasn't as well supported and should have a PX fallback.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).