Back
Question
Asked

Any advice for writing CSS for Big Big Screens. Monitor Size.



Take into account that people don't necessarily use full screen browser windows with such large screens. Base your design decisions on viewport sizes, not screen resolutions.

My current web design flow is:

  1. Design on Sketch on Mac.
  2. Then write CSS for the Laptop and scale it down for iPad an iPhone.

The current site I'm designing for is used by teachers, who use monitors / old PC's at school.

When it comes to scaling up CSS to work on bigger screens would you use VW units for FontSize / Padding etc ...?
Would you also start out on Laptop Design first, then scale up?
I'm not good with REM and EM's. Is it time to Learn them?

Use vmin and vmax units for element size (especially type). REMs and EMs are pretty fundamental now.

Here's a quick explainer how they work:

Your "root-most" element should have a font-size specified. So let's say you put font-size: 16px on the <html> element.
16px is now your root measurement, hence 1rem = 16px

Every time you reference REM, it will use that 16px value as the base (or whatever value you set there). So .5rem is 8px, .25rem is 4px, 2rem is 32px, etc.

What about EM, then? Well, EMs are what I like to call local. They respond to the font-size set on the element that you're modifying. So let's say your 1rem is 16px. You just made a header but gave it a bigger font-size: 2rem. How would you go about adding some padding to that header? Simple, you could do padding: 1rem which will add 16px to all sides or you could do padding: 1em which will add 32px to all sides. Why? Because this element's font-size is 2rem (32px), so EM is calling the local font-size to determine what value it should be.

I think about it like this:
REM — R(oot)ElementMeasurement — root size
EM — ElementMeasurement — local size

Good Point. Thanks Marc.

So, Pug, would you cut px out entirely? (At least for type)

Yes, that's what I do. I set the root font-size on my <html> tag and then use REMs and EMs where applicable. For all elements, not just type.

If you modify your <html> font-size with a media query, every measurement will change with it.

seriously good explanation that. Thanks pug.

any good use case for em then?
In what circumstance would rem fall short?

When you want to have element proportions stay the same size when the font-size on them is changed. So for example a pill-shaped tag. You wanna shrink it on mobile but keep it large on desktop.

If you use EMs on all paddings and border-radius, you can keep the proportions the same by changing just the font-size of that element.

Check out this demo @harrydry: codepen.io/pugson/pen/zPWKeX

cheers big man. i made my own js fiddle off your example.

jsfiddle.net/harrydry/g0p45rb… @pugson

Think I've got it. Looking forward to putting into practice.

Having done the CSS Job.

Boy, was all this advice helpful.