从上面的代码，主要是改变了dpx和document的font-size大小。大小为docEl.getBoundingClientRect().width/10+'px';

假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px.(1rem相对于根节点的字体大小)。

假如一个元素的宽是160px,在平时，我们可以采用百分比可以做到自适应，假如使用响应式的话，可能需要设置多个，比如在320px，输出80px，而在640px输出160px等。而采用以上的方法，则只需要输出2.5rem就能实现统一，如下表格：

以上的2.5rem是怎么得出的呢？

160/64（1rem的基数为64px）=2.5rem;按照官方的说法（750px举例）

Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：

1a=7.5px
1rem=75px

那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，对应的font-size为75px：

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px*176px,转换成为2.346667rem*2.346667rem。

另外在使用这个来处理自适应的另一个坑就是csssprite，作者的建议是使用svg，或者iconfont.或者base64等其他方案。

另外就是在dpr=2时，小图片可能会出现模糊，建议以最大的图片来切图。

字体建议使用px

在作者的观点中，是建议描述性的字体使用px，如果有slogan之类大于48px的，可以使用rem，由于使用rem在iPhone5和iPhone6中字体不同，可能出现13px和15px,点阵字体。

显然，我们在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混合宏：

@mixinfont-dpr($font-size){
font-size:$font-size;

[data-dpr="2"]&{
font-size:$font-size*2;
}

[data-dpr="3"]&{
font-size:$font-size*3;
}
}

有了这样的混合宏之后，在开发中可以直接这样使用：

@includefont-dpr(16px);

当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用rem给slogan做计量单位。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

• 返回顶部
• 3162201930
• czq8825@qq.com