title: Website elements and fonts are too small in mobile devices
body: <p>I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some media-queries to it. Looks great in redimensioned browsers. I have cut some elements and features and everything was fine... until I tested it with my smartphone</p>
  <p>The screen isn't big. Less than 4' (probably 3.5). I put some alerts in the code and realised its width was 980px. Almost 3 times bigger than my tests on resized browsers.</p>
  <p>Everything is just too small. Other things are great: media queries are working, the cuts I made in the code are OK too, but you can barely see the content in my mobile. This is certainly not I wanted.</p>
  <p>I want it to look like an <strong>App</strong> and indeed it looks like an app on the redimensioned browser.</p>
  <p>How do you create your responsive websites to deal with problems like this one?</p>
  <p>I read something about using <strong>EM</strong> (and there is something new called REM) units but I am still very confused about it. Do I have to change ALL the <code>px</code> to <code>em</code>?</p>
  <p>And also I know you can set the <code>font-size</code> in the <code>html</code> or <code>body</code> tags and all the other elements will inherit from them. Is that an approach? What do you usually do? Is there a trick or something? I'm not using bootstrap nor any other front-end framework.</p>