移动端网页中文字大小的设定

最近在做移动端的网页，类似于web app的小应用。发现文字大小这块开始的时候不知道改怎么设定。查了网上的质料，发现有些用px单位，有些用em单位的，但是少部分用的是rem单位。

而我做的是使用jQUery mobile 框架来弄的。所以使用em作为单位。当然有时候在处理距离的时候还是用了px单位。也用了%单位，和em单位。

我大概认为的几点：如果是以这个文字大小的话，body{ font-size:62.5%;} ,那么 12px=1.2em; 1em=16px; 做移动端的话就不需要引入头部：

相反的，如果页面的头部引入了上面的，那么我认为设置字体大小为：body{ font-size:100%;} 然后针对p:1em; 等设置字体大小。但是可能会看到当屏幕分辨率变大的时候，想要字体也出现随着屏幕分辨率变大的话，那么就需要多媒体设置：如下：
@media screen and (max-width:360px){body{font-size:12px}}

@media screen and (min-width:360px){body{font-size:13px}}

@media screen and (min-width:400px){body{font-size:15px}}

@media screen and (min-width:480px){body{font-size:18px}}

@media screen and (min-width:560px){body{font-size:20.5px}}

@media screen and (min-width:600px){body{font-size:22.25px}}

@media screen and (min-width:640px){body{font-size:24px}}
这样文字大小会随着屏幕分辨率的变化而变化。注意：如果你的单位是定位px的话，那么久固定死大小了，不会随着屏幕分辨率变化变化。应该用em或者是rem的话字体大小就会响应式变化。

在做移动页面的时候注意了：设计师给你ui图。要根据ui图的大小范围来做。而且文字大小也要根据ui图的文字大小来做。如果ui图是640px的话，那么你就要按照320px的来做。距离间距的都要缩小一半。文字大小也要缩小一半。注意ui图的单位是px。所以要回转换成em。或者rem。

1em=16px， 10px=1.5rem单位来换算。技术px转换成em的基点是16