rem適配
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
放頭部聘殖,
文字基準:font-size:75px
rem并不適合用到段落文本上。所以在Flexible整個適配方案中行瑞,考慮文本還是使用px作為單位奸腺。只不過使用[data-dpr]屬性來區(qū)分不同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;
}
為了能更好的利于開發(fā)血久,在實際開發(fā)中突照,我們可以定制一個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;
? ? }
}
有了這樣的混合宏之后,在開發(fā)中可以直接這樣使用:
@include font-dpr(16px);