Adobe Community: How can convert the em,px,pt and % in css

Currently Being Moderated

1. Nancy O.,

Feb 15, 2013 11:57 AM in reply to manojb05

Report

Approx. Conversions

1em = 100% = 16px = 12pt

Nancy O.

|

Mark as:

Currently Being Moderated

2. Jon Fritz II,

Feb 15, 2013 11:57 AM in reply to manojb05

Report

I'm not sure what you mean by "convert" them?

Most browsers default font is 16px/1em/12pt/100%

|

Mark as:

Currently Being Moderated

3. kennethkawamoto2,

Feb 15, 2013 4:04 PM in reply to Jon Fritz II

Report

Not really.

There are absolute units (cm, mm, in, px, pt, pc) and relative units (em, ex, ch, %, rem, vw, vh, vmin, vmax) in CSS and by definition they cannot be converted to each other - e.g. 1em can be 1px or 1000px depending on the base/parent unit length.

--

Kenneth Kawamoto

http://www.materiaprima.co.uk/

|

Mark as:

Currently Being Moderated

4. manojb05,

Feb 15, 2013 10:56 PM in reply to kennethkawamoto2

Report

thanks all. I am try to make a website. I want to font size & web container widths are very friendly to all browsers & devices.

Plz help this?

|

Mark as:

Currently Being Moderated

5. Nancy O.,

Feb 16, 2013 10:18 AM in reply to manojb05

Report

Responsive Web Design

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsiv e-web-design/

Introduction to CSS Media Queries

http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html

CS6 Fluid Grid Layouts (6 min video)

http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/

CS6 Fluid Grid layouts (17 min video)

http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/

Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6

http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html

Nancy O.

|

Mark as:

Currently Being Moderated

6. manojb05,

Feb 17, 2013 8:56 AM in reply to Nancy O.

Report

thanks nancy.

For eg my web page width is 960 which formula used for convert to the percentage.

Same for Font i would like to apply font size for 18 pt which formula used for same?

|

Mark as:

Currently Being Moderated

7. Nancy O.,

Feb 17, 2013 10:39 AM in reply to manojb05

Report

Conversion chart.

http://reeddesign.co.uk/test/points-pixels.html

Nancy O.

|

Mark as:

Currently Being Moderated

8. manojb05,

Feb 18, 2013 9:56 AM in reply to Nancy O.

Report

Thanks nancy.

what is the base value for convertion.

For eg i dont have a this convertion table i would like to apply for 17 pt font size to ems & %. How can i get ems & percentage.

In any base value to extraction from 17pt to 1.45 em & 145% .

Because 17 pt size is = 1.45 em & 145% . How can we get this values. plz brief me

|

Mark as:

Currently Being Moderated

9. Nancy O.,

Feb 18, 2013 10:19 AM in reply to manojb05

Report

Point is a print size. It doesn't translate well to screen.

1 ÷ parent font size (px)

x required pixels

= em equivalent

Assuming your base font size is 16px (browser default)

1 ÷ 16px = 0.625

x 960px screen width

= 60em

Nancy O.

|

Mark as:

Currently Being Moderated

10. manojb05,

Feb 18, 2013 10:39 AM in reply to Nancy O.

Report

thank you so much nancy.

I have one doubt what is the base value for pixels to percentage.

for Eg my container width = 960 px how can i convert to percentage.

what is the formula.

|

Mark as:

Currently Being Moderated

11. Jon Fritz II,

Feb 18, 2013 10:50 AM in reply to manojb05

Report

Percentage settings for container width is based on the parent container. If the parent containers have no fixed width increment set, then % will be based off of the browser window width.

To convert 960px to a percentage, you would need to have a rule in place in the css defining the total maximum width of its container to then base a percentage off of. If you set the container width to 1000px, 960px would be 96%.

|

Mark as:

Currently Being Moderated

12. manojb05,

Mar 3, 2013 6:53 AM in reply to Jon Fritz II

Report

hi jon how can get 96%. are you using any formula for that.

|

Mark as:

Currently Being Moderated

13. Nancy O.,

Mar 3, 2013 9:35 AM in reply to manojb05

Report

100% = available viewport. What you're asking is not possible to calculate unless you know the display size. Since everybody uses different display sizes and browser viewport widths, this is an unknown variable. Displays vary from 300px all the way up to 3200px.

The best you can do is to create a fixed body width of 1000px and an inner div width of 96% = 960px.

CSS:

body {width: 1000px}

#container {width: 96%; margin: 0 auto}

Nancy O.

|

Mark as:

Currently Being Moderated

14. manojb05,

Mar 5, 2013 10:44 AM in reply to Nancy O.

Report

thanks nancy.

I have one doubt my container width is 96% ok i want to apply Margin 10 px for container, this case can i convert margin also to percentage?

how can i do this?

|

Mark as:

Currently Being Moderated

15. Nancy O.,

Mar 5, 2013 10:48 AM in reply to manojb05

Report

Yes, you can margin: 1% or whatever works best for your project.

Nancy O.

|

Mark as:

Currently Being Moderated

16. manojb05,

Dreamweaver

How can convert the em,px,pt and % in css

Feb 15, 2013 11:48 AM

More Like This

Bookmarked By (0)

Answers + Points = Status