手机端开发，基础设置1-body-fontsize

1、设计稿设计大小按照750设计。

2、单位使用rem，相对于body  fontsize 相对大小计算。

3、假设750下，body fontsize 为100，为了方便计算。

4、经过设置当前设备的 fontsize值，赋予 rem，变值属性。

 

rem.js：

(function () {
　　　function changeRootFont() {
　　　 var designWidth = 750, rem2px = 100;
　　　 document.documentElement.style.fontsize =
　　　 ((window.innerWidth / designWidth) * rem2px) + 'px';
　　　 //iphone6: (375 / 750) * 100 + 'px';
　　　}
　　　changeRootFont();
　　　window.addEventListener('resize', changeRootFont,false);
})();

代码效果：

假设如今的设备是iphone6,物理像素是750，逻辑像素为375（css像素）。

那么iphone6的宽度为375px,(window.innerWidth / designWidth) * rem2px，使得body fontsize为50px。

设计稿的100px，css书写为1rem，在iphone6上呈现的大小为 1*50=50px。进而实现浏览器端的自动缩放。

 

逻辑像素：

早期屏幕分辨率比较小逻辑像素等于物理像素，屏幕技术逐渐提高致使在相同物理宽度下1个像素点变的更小，致使12px视图效果过小。

苹果公司首先在safri中增长了meta  viewport 标签，逐渐andriod厂商也增长了此参数。从而有了像素逻辑。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">