html5 Audio音乐播放器（canvas圆形音乐播放进度条）(二)

7 问题：对于移动端页面 要适配各种手机屏，对于手机适配的问题 我们经常用rem单位 来处理，但是canvas 不支持rem ，所以需要用js 获取到客户端的手机屏宽度 进行转化，具体怎么做，下次再讲！

上次的问题还没回答：

这次来回答：
1 先说下rem布局 自适应屏幕的原理
其实rem 就是根节点下 字体大小，通过改变字体大小 来改变改变html元素的大小，把手机宽度 和 字体大小关联起来 ，页面就回根据手机屏幕大小，改变字体大小，然后改变页面元素大小，做到自适应各种手机屏幕。

假设设计稿上 页面宽度为750px；

html｛
font－size：100px;
｝

通过js代码 改变 当前字体大小
document.getElementsByTagName(‘html’)[0].style.fontSize = document.body.clientWidth * 100 / 750 + ‘px’;

在 屏幕为750 px的手机上 1rem 就等于100px；
640px 呢， 1rem 就是 640 ＊ 100／750 ，比上 面要小，其他尺寸也是如此，从而达到自适应；

所以根据设计图纸像素 转化为rem单位即可

2 在js 里面 无法识别 rem单位，该怎么处理呢？其实处理方式一样；

假设设计稿为750px；
可以用 var rem = document.body.clientWidth * 100 / 750 作为基本单位；

然后把像素 转为rem
500px；
5＊ rem ＋‘px‘；

这样在 js 里面也可以用 rem 单位了。