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 单位了。