本文共 906 字，大约阅读时间需要 3 分钟。

flexible是淘宝提供的一套REM手机适配的库，使用简单实用。开发者可以通过引入flexible.js和flexible_css.js来清除默认样式，或者通过CDN方式获取。

在实际开发中，需要先通过Sublime Text安装cssrem插件。具体步骤如下：

插件支持配置参数：

• px_to_rem：px转rem的比例，默认为40，建议设置设计稿的1/10
• max_rem_fraction_length：rem的小数位数，默认为6
• available_file_types：支持文件类型，默认包括.css、.less、.sass

示例配置：

{  "px_to_rem": 37.5,  "max_rem_fraction_length": 6,  "available_file_types": [".css", ".less", ".sass", ".html"]}

在HTML中直接使用rem单位即可，无需额外转换。对于文本适配，建议使用px，并结合[data-dpr]属性区分不同分辨率：

div {  font-size: 12px;}[data-dpr="2"] div {  font-size: 24px;}[data-dpr="3"] div {  font-size: 36px;}

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);

适用于段落文本的场景，可通过data-dpr属性动态调整字号。如需自定义slogan适配，可直接使用rem单位。

参考文章：flexible适配方案

转载地址：http://uzsuz.baihongyu.com/