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

Set Multisite in drupal

For Linux 9.10 Please Follow the steps : 1) Extract the drupal in public html folder or any other folder.(say exampleDrupal). 2) Add below lines to exampleDrupal/sites/sites.php     $sites['site1.test'] = 'site1.test';     $sites['site2.test'] = 'site2.test'; 3)  Create two folders in exampleDrupal/sites/ folder.       as site1.test & site2.test.      OR      Using terminal run following commands :      i)  cd example.com/sites      ii) mkdir site1.test/ site2.test/ 4) Copy the default.settings.php file from  exampleDrupal/sites/default to site1.test &  site2.test folder.     OR      Using terminal run following commands :       i) cp default/default.settings.php site1.test/settings.php       ii) cp default/default.settings.php si...
Post a Comment
Read more

To get pager on page

Use of pager query :   Drupal 4.6 - 6 :  pager_query($query, $limit = 10, $element = 0, $count_query = NULL) Perform a paged database query. Use this function when doing select queries you wish to be able to page. The pager uses LIMIT-based queries to fetch only the records required to render a certain page. However, it has to learn the total number of records returned by the query to compute the number of pages (the number of records / records per page). This is done by inserting "COUNT(*)" in the original query. For example, the query "SELECT nid, type FROM node WHERE status = '1' ORDER BY sticky DESC, created DESC" would be rewritten to read "SELECT COUNT(*) FROM node WHERE status = '1' ORDER BY sticky DESC, created DESC". Rewriting the query is accomplished using a regular expression.  $output1 .= theme('pager',null, $count, 0); This is used to get the number. We can use this pager query in "Custom Search...
Post a Comment
Read more