1

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).

Source

Community
  • 1
  • 1
Brennan
  • 305
  • 4
  • 19
  • 1
    I think for at least part of the answer, you are asking for an opinion. Media query width is referring to viewport width – Huangism Jun 17 '15 at 15:24
  • It is preferred if you can post separate questions instead of combining your questions into one. That way, it helps the people answering your question and also others hunting for at least one of your questions. – Paulie_D Jun 17 '15 at 15:38
  • Opinion referring to the 2nd question? I'd like to think that is more biased to relevancy of a unit at points in time than personal choice. Mostly trying to clarify what I've read, `em` units have problems, `rem` units seem to work around that though I don't see them mentioned much in articles for some reason, finally besides fonts `px` units shouldn't be problematic, and are sane/correct to use today; not being used wrongly due to lack of knowledge/experience. – Brennan Jun 17 '15 at 15:46
  • 1
    @Paulie_D I can split it up into separate questions if you like. They seemed related context wise. I am trying to pick up responsive design and the concept that a 1920px wide phone won't be reporting 1920px but a normalized value based on the pixel density is a bit hard to grasp. I'm not sure if it makes sense to work with `px` units when I'm interested in physical size of the screens due to varied densities, yet `px` seems to be the go to unit, provided you add the meta tag. Prior to that just clarifying my understanding of using a grid+breakpoints+mediaqueries incase I had a misunderstanding – Brennan Jun 17 '15 at 15:57
  • 1
    Read this to get you started on pixels http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – Adam Buchanan Smith Jun 17 '15 at 15:59

0 Answers0