[转载]兼容性--rem兼容适配解决方案
来源:互联网 发布:四方麻将 软件工作室 编辑:程序博客网 时间:2024/05/29 03:37
转载于https://www.w3cschool.cn/weflow/weflow-rem.html
REM 兼容适配解决方案
什么是 REM
REM(Font size of the root element)是指相对于根元素的字体大小的单位。
范例:
- 若根节点
font-size
设置为10px
,则使用3rem
时,计算后得3*10 = 30px
- 如果根节点设置为
20px
,侧计算后得3*20 = 60px
为什么使用 REM
- 相对于
流布局
、响应式布局
等适配方式,REM 适配
更为灵活,在不同屏幕尺寸上根据根节点来等比适配 - 兼容性好(Android 2.1+ / iOS 4.1+)
- 使用便捷,从
px -> rem
可以使用工作流自动完成
tmt-workflow 基准值约定
<html>
根节点默认font-size
=20px
- 视觉稿默认宽度为
375px
(即 iPhone 6 尺寸) - 其它屏幕宽度以 iPhone 6 的视觉为为基准,进行等比缩放
- rem 单位生效范围为所有内联、外联样式的 CSS 属性值,
1px
除外
tmt-workflow为微信TmT团队研发的工作流。
tmt-workflow
是一个基于 Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。
现已推出 GUI
桌面工具:WeFlow
,无需安装任何环境依赖即可使用,官网下载:http://weflow.io/
tmt-workflow REM 方案使用思路
- 编码过程中统一使用
px
作为单位 - 工作流编译后,
px
->rem
自动完成 - 调用 lib-rem.less 进行个屏幕比例适配设置
开启 REM
首先,编辑配置文件 .tmtworkflowrc
如下:
{ "supportREM": true}
再次,在项目 LESS 出口文件中引入 lib-rem.less
流程详述
开启后,CSS 分为 外联样式
和 内联样式
两部分逻辑执行:
Less -> CSS
过程,由插件 postcssPxtorem 对 LESS 中的px
进行单位转换HTML/EJS -> HTML
过程,会使用插件 posthtmlPx2rem 对 HTML 中的内联样式
进行单位转换
其它注意点
1. 兼容 1px 问题
考虑到 1px 转换为 rem
会有小数bug,工作流中会忽略 1px
的转换,最小转换数值为 2px
。
参见:postcss-pxtorem option:minPixelValue
参见:posthtmlPx2rem option:minPixelValue
2. 雪碧图兼容问题
为避免雪碧图遇到小数计算 bug,设置雪碧图内各个元素之间的间隙为 4px
,参见_tasks/TaskBuildDist.js
3. 强制不使用 REM 的预留 hack
如果希望某条 CSS
样式不进行单位转换,可使用如下大小写敏感的 px
写法:
如:12PX
代理 12px
,这样工作流中就会忽略这条 CSS
属性,不进行单位转换
阅读全文
0 0
- [转载]兼容性--rem兼容适配解决方案
- 手机适配---REM
- 手机适配rem
- rem移动适配
- rem单位适配
- REM手机屏幕适配
- REM手机屏幕适配
- 移动端rem 解决方案
- html5布局适配rem
- 兼容多种浏览器“复制到剪贴板”的解决方案[转载]
- Android-- UI 布局,屏幕分辨率兼容和版本兼容,屏幕适配解决方案
- 字体图标兼容性,兼容IE
- XHTML+CSS兼容性解决方案
- XHTML+CSS兼容性解决方案
- CSS兼容性解决方案
- XHTML+CSS兼容性解决方案
- CSS 兼容性解决方案
- 浏览器兼容性解决方案
- 网页动态时钟特效!一看就懂,附带效果图哦!!!
- 技术博客收纳
- 文章标题
- JavaWeb学习笔记-java基础-2-静态导入
- ORACLE数据库误操作执行了DELETE,该如何恢复数据?
- [转载]兼容性--rem兼容适配解决方案
- VS 无法在web服务器上启动调试。您没有调试web服务器进程的权限
- QML 学习摘录 06
- 编辑器
- JAVA初识(二)
- centos7安装py3,并使得与系统自带的py2共存
- 输入两个字符串的比对,输出从哪一个元素匹配
- 用移动硬盘做系统安装盘或系统运行盘
- HTTP的REST服务简介