Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ed Basquill
3,984 PointsI am confused on units. This video is doing 100vh - 89px. How many px's are in a vh? How many em's are in a px?
12 inches = 1 foot 3 feet = 1 yard
100vh = ? em 1 em = ? px
How can you subtract 89px from a 100vh? Isn't that "apples and oranges?"
3 Answers
Cooper Runstein
11,850 PointsBoth em and vh are relative units, while px are constant. There is no equation to convert in all cases, rather depending on the situation you're in 1vh and 1em will have a pixel value -- but that will change from situation to situation. Imagine a building, vh would be the a fraction of the height, if I have building1, a 100 foot tall building and building2, a 50 foot tall building, both buildings will be 100vh tall, but 1vh on building one would be bigger compared to building two. (1/100th of 100feet is bigger than 1/100th of 50feet). Em could be though of as stories, I can set the height of each story -- 1em will be the same per building, but building1 might have taller floors than building2, or the opposite may be true. Feet though, feet will always be the same. No matter what, 1 px is 1px, just as a foot on building1 is the same as a foot on building2.
To answer the last part of your question, if I have a building that is 100vh tall (as are all buildings), I can take that value and subtract 10 feet from it. For each building, the result may be different, but the operation is valid -- I'll have the original height minus 10 feet. I can always take screen height in vh and point to 20px below the top, even if that will be a different percent of the way down the page, depending on the screen.
Ed Basquill
3,984 PointsI am up to the point in my Treehouse training where I am doing a 47 minute class on CSS layouts for mobile devices and so on --- more or less the whole class answers this question. Things are evolving to account for different devices, and you can't make them all precisely the same. They are introducing flex boxes
Ed Basquill
3,984 PointsThe video was made in early 2015 and said that flex boxes as a design feature were going to be the next thing, but many browsers couldn't handle them. It is late 2018. Is that still true?
Cooper Runstein
11,850 PointsFlexbox is pretty standard now, and CSS Grid is pretty close to it as well. There are some minor issues on browsers like Internet Explorer, but for the most part you can use these without issue.
https://caniuse.com/#feat=flexbox This site is a really good resource for questions like this.
Ed Basquill
3,984 PointsEd Basquill
3,984 PointsSo if I follow your logic, suppose you have two monitors: monitor 1 is 2048 X 1436 pixels. monitor 2 is 960 X 720. 100vh is 20px for monitor 1 will look like 100vh minus 10px for monitor 2----it won't look the same. Why not always use relative units?
Cooper Runstein
11,850 PointsCooper Runstein
11,850 PointsI'm not sure if I follow your calculations, but yes, they will look different. There are a few reasons not to use relative units, first off, if everything is relative, when you adjust your browsers window size, EVERYTHING will change. That typically doesn't look too great. The other main reason is Javascript, using relative units for layouts is great, until you need to get a position on the screen in JavaScript. It's a lot easier to select the top of your footer when you know it's 100px off the bottom of the page than when it's 20vh from the bottom of the page.