title: css web design on mobile devices
body: <p>i am new to web development.  terrible at math as well</p>
  
  <p>i was wondering how does pixels translated from one screen size to the other on a webpage. Say for example, I specify 
      margin-left: 50px; </p>
  
  <p>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 webpage in my iphone webview (which takes entire iphone screen), it is measured as 40px, not 50 as i specified.</p>
  
  <ol>
  <li>sure iphone screen is smaller, it needs to do some scaling i guess..? is that right?</li>
  <li>how is this conversion done? what is the process? is there some sort of formula?</li>
  <li>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?</li>
  <li>i generally code on bigger screen first, then see how it runs on the smaller screen. is this the right approach.</li>
  </ol>
  
  <p>i want a good and big answer for #2, can someone please help</p>