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

Design

Posted by garycardinale2
garycardinale2
778 Points

I need to write design specs from a Photoshop iPhone 6 artboard, but the measurements don't match a real iPhone 6.

How do I convert the measurements for font-size, padding, margin, etc to what a developer can use when they write the css for iPhone and iPad. All measurements are in pixels in my mockup. I know there are tools like Simpli that can accomplish this, but I need to do it myself at this moment.

2 Answers

James Cirkl
James Cirkl
13,998 Points
James Cirkl
James Cirkl
13,998 Points

If your referring to the @media queries.

iPhone6 = 375px x 667px

iPhone6+ = 414px x 736px

garycardinale2
garycardinale2
778 Points

I'm referring to the measurements in the mockup. So, a font-size of 30px looks good in a PSD's iPhone 6 art board, but, in an actual iPhone 6, 30px looks too big. Is there some calculation to perform on the 30px font-size in the art board to get the correct pixel size for the actual iPhone 6.

James Cirkl
James Cirkl
13,998 Points
James Cirkl
James Cirkl
13,998 Points

This is not always the easiest thing to do but I would use 1rem for a starter and go from there for sizing.

1rem is = to 16px 2rem is = to 32px

take pixel size you want "30px" divide by 16 == "1.875rem" input that number if you want exactly that matching size versus what you think looks good visually to you.

Calc doesn't always work the best across device sizes. Rem units are equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px).

garycardinale2
garycardinale2
778 Points

Thanks! I'll see if the devs in India are working in rem