CSS web design on mobile devices

I am new to web development; terrible at math as well!

I was wondering how does pixels translated from one screen size to the other on a web page. Say for example, I specify:

margin-left: 50px; 

If I load this web page in my iPad webview, I measured it (using a ruler software, in px) it is indeed 50px. If I load this webpage in my desktop browser, it is indeed 50px but when load this web page in my iPhone webview (which takes entire iPhone screen), it is measured as 40px, not 50 as I specified.

1. sure iPhone screen is smaller, it needs to do some scaling i guess..? is that right?
2. how is this conversion done? What is the process? Is there some sort of formula?
3. what does this mean for designers? How do I know the right size I should assign, so the layout does NOT break on all screens?
4. I generally code on bigger screen first, then see how it runs on the smaller screen. Is this the right approach?

I want a good and big answer for #2, can someone please help?

I would highly suggest that you look into relative sizes...it will be relative to the device. Check out any article about Responsive Web Design. Hard pixel values are a no-no, if you get the percentages and relative sizes it generally fixes a lot of issues. Now if you are new to web development you will want to do some learning before diving into responsive. You can also probably do a little studying on media queries. Just media query it for a temporary solution.