New to WIP?

We're a group of makers shipping together. We help each other stay accountable and reach our goals.

Apply for access
Topics
👨‍💻 Developers
Other questions
🤔 What do you do for marketing? Be the first to reply
🎨 Freelance designers. When and how. 2 answers
What steps are included in your CI pipeline you should have added sooner? 11 answers
AI to work with a lot of data (two usecases) 8 answers
Back
 Question
Asked

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


Harry Dry
@harrydry

👋 Join WIP to participate

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.

 Reply
Harry Dry
@harrydry

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?

Reply
Pug Pugson
@pugson

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

 Reply
Harry Dry
@harrydry

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

 Reply
Pug Pugson
@pugson

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.

 Reply
Harry Dry
@harrydry

seriously good explanation that. Thanks pug.

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

 Reply
Pug Pugson
@pugson

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

 Reply
Harry Dry
@harrydry

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.

 Reply
Harry Dry
@harrydry

Having done the CSS Job.

Boy, was all this advice helpful.

Reply