本文共 1782 字，大约阅读时间需要 5 分钟。
flexible是淘宝提供的一套REM手机适配的库，用法也非常简单
首先，在页面中引入相关资源 包括flexible.js和flexible_css.js(用于清除默认样式)，或者通过cdn方式引入
然后通过实际的px大小/根元素font-size的大小，就得到了rem的值，这里提供了一个sublime的cssrem的插件，可以快速将px转换成rem值，
插件地址https://github.com/flashlizi/cssrem安装使用安装● 下载本项目，比如：git clone ● 进入packages目录：Sublime Text -> Preferences -> Browse Packages...● 复制下载的cssrem目录到刚才的packges目录里。● 重启Sublime Text。配置参数参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem● px_to_rem - px转rem的单位比例，默认为40。● max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。● available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。修改配置参数，支持在html中转换rem
{ "px_to_rem": 37.5, "max_rem_fraction_length": 6, "available_file_types": [".css", ".less", ".sass",".html"]} px_to_rem是px转rem的单位比例，设置为设计稿的1/10即可 ，例如我们是750px的设计稿，则这里可以设置为75，当然这个是按照2倍设计图来计算的，假如是375px则设置为37.5，最终这个值在html根元素中会生成font-size:37.5px
前面大家都见证了如何使用rem来完成H5适配。那么文本又将如何处理适配。是不是也通过rem来做自动适配。
显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。div { width: 1rem; height: 0.4rem; font-size: 12px; // 默认写上dpr为1的fontSize}[data-dpr="2"] div { font-size: 24px;}[data-dpr="3"] div { font-size: 36px;} 为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏：
@mixin font-dpr($font-size){ font-size: $font-size; [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size: $font-size * 3; }} 有了这样的混合宏之后，在开发中可以直接这样使用：
@include font-dpr(16px);
当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用rem给slogan做计量单位。
参考文章
作者：fozero
声明：原创文章，转载请注明出处，谢谢！标签：flexible,rem