最近项目需要兼容很多类型的手机屏幕，对于字体设置这块挺多疑惑的。

根据不同的设备宽度（物理宽度）有不同的计算方法：
如图：
http://520ued.com/uploads/20141218/14189...

公式推导
1px=16em;
实现1px=10em;// 10÷16*100 = 62.5%
看了手机屏的一些规范
320width=10px;//
举个例子：384/640 = 0.6，384是640的0.6倍，所以384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。
读过以上内容做了个测试：

css

html

效果图

**为什么 设置px的单位大小不会随屏幕比例变大而变大，而设置成em或rem的元素可以随页面动态适配大小？
还有如果不用js去获取屏幕大小去设置根元素的font-size，用媒体查询去做，screen 的范围是写
min-device-width 还是 min-width 这两个属性是怎么区分的？**