编程类型:
JavaScript + css
技能点:
- rem
- css
- JavaScript
题目描述:
完成 rem 的兼容性适配(怎么叫做完成):
- html 根标签根据屏幕大小自动设置 font-size 的值。以 Iphone 6 为例,font-size 为 37.5 px
- 在 css 演示中写入 css,自动渲染为 rem
任务要求(按实现步骤对任务进行分解):
- 实现 html 根标签 font-size 的自动适配
- 实现 px 转 rem 的 css 功能实现
任务提示/思路分析:
- 尝试获取屏幕的大小,根据不同的屏幕大小来定义根元素 font-size
- 尝试通过 scss 定义px to rem 的转换函数
- 可参考 postcss-pxtorem、lib-flexible 的实现
参考答案:
前端代码参考: