Skip to main content

Difference between pixels and em When giving size in em & px.


PIXEL SIZE :
By setting font size with pixel you can fully control over the font size.

Example:

h1 {font-size:60px}


h2 {font-size:40px}


p {font-size:16px}

Above examples allows Chrome, Firefox, and Safari to resize the text, but not Internet Explorer.

The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).

.EM SIZE :

To avoid the resizing problem in IE many web designer use em instead of pixel. And it is recommended by W3C.

The default font size in browser is 16px. And 1 em is equal to current font size it means 1 em is equal 16px.

Here is the formula to calculate pixel to em :

Pixels /16 = em

That means if font size is 60px it will be in em is 3.75em.

With the em size you can adjust the font size in all browser. But there is problem in IE . The problem is when you resizing the text, it becomes larger than it should when made larger, and smaller than it should when made smaller.

To solve this problem you need to set a default font size in percent (%) fot the body element.

Here is an Example:

body {font-size:100%}

h1 {font-size:3.75em} [is equal 60px]

h2 {font-size:2.5 em} [is equal 40px]

p {font-size:1 em} [is equal 16px]

Now our code works perfectly and shows the same text size in all browsers. It also allows all browsers to zoom or resize the text.

To Know More About This. Click Here .

Comments

Post a Comment

Popular posts from this blog

Create Hooks in Civicrm in Joomla 1.5

  Create Hooks in Civicrm in Joomla 1.5 Create folder in any directory like /Joomla/media/civicrm_hook . Create file civicrmHooks.php in this directory. Go to Administer CiviCRM > Global Settings > Directories Set the path for custom php here. Use the civicrm hooks with Joomla_civicrm_hookName format. Ex. function Joomla_civicrm_buildForm( ){ // Write your code here. }
Post a Comment
Read more

New Services to the world

Different government services & Online Services GST Registration Company Registration ITR PAN Card Aadhar Card E-way Bill Registration Food License Accounting Service Website designing Website development Website Hosting Website Domain Website Testing (Manual) Website SCO Optimization Lead Generation Add Creation and many more...
Post a Comment
Read more

Some of the good sentences that one should keep in mind.

Don’t compare yourself with anyone in this world. If you do so, you are insulting yourself.  You are not responsible for what people think about you . But you are responsible for what you give them to think about you. A man is lucky if he is the first love of a woman. A woman is lucky if she is the last love of a man. Write your Sad times in Sand, Write your Good times in Stone. Behind every successful man, there is an untold pain in his heart. Without your involvement you can't succeed. With your involvement you can't fail. Love your job but don't love your Company because you may not know when your company stops loving you. You may get DELAYED to reach your Targets. But every step you take towards your target is EQUAL to Victory. It's better to loose your Ego to the one you Love, than to loose the one you LOVE because of EGO. Don't make promise when you are in JOY . Don't reply when you are SAD. Don't take decisions when you are ANGRY. Think twice, Act w...
Post a Comment
Read more