html5 Audio音乐播放器(canvas圆形音乐播放进度条)(二)
来源:互联网 发布:如何批量注册淘宝小号 编辑:程序博客网 时间:2024/04/28 06:41
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 单位了。
1 0
- html5 Audio音乐播放器(canvas圆形音乐播放进度条)(二)
- html5 Audio音乐播放器(canvas圆形音乐播放进度条)(一)
- html5,audio音乐播放器
- html5,audio音乐播放器
- android 音乐播放 圆形进度条
- html5 音乐播放器 audio 标签用法
- Audio--- HTML5环形音乐播放器
- HTML5音乐播放器
- HTML5音乐播放器
- Html5 audio标签实现音乐播放
- HTML5之audio实战,网页音乐播放器开发
- 使用Audio API设计绚丽的HTML5音乐播放器
- MediaPlayer 音乐播放器进度条
- Android音乐播放器设置播放进度条
- html - html5 audio 音乐自动播放,循环播放等
- 音乐播放器--简单实现播放、暂停、随机播放、音乐进度条(第一版)
- 自定义音乐播放进度条
- android 播放音乐-进度条
- node.js之打包工具webpack
- My97DatePicker时间控件
- android 系统短信数据库的查询与删除
- 18.2 增强型图元文件
- 3.调试与配置,控制器
- html5 Audio音乐播放器(canvas圆形音乐播放进度条)(二)
- 大数据下的日志-flume(二)高并发下的优化
- C#学习笔记007-字符串练习
- NoSQL数据库和oracle数据库等一些问题的收集
- Android之使用递归删除文件或文件夹
- swift 基础2
- iOS ---oc和js交互2
- STM32 KEIL下的堆栈设置
- AIDL服务(跨进程访问)