css - 移动端rem适配问题
阿神
阿神 2017-04-17 11:58:07
0
3
859

如果在移动项目中使用像weui这种样式库怎么结合rem布局?
比如想用淘宝的flexible方案布局,会改变dpr

[data-dpr="2"] p {
    font-size: 24px;
}

[data-dpr="3"] p {
    font-size: 36px;
}

weui里面字体就会出现异常,请问怎么解决这种问题?
或者说在用第三方样式库/组件库的时候不用把px改成rem?

阿神
阿神

闭关修行中......

全部回复(3)
PHPzhong

这个是lib.flexible的文档说明,你可以去看看。

PHPzhong

如果你不想改变dpr,完全可以在meta标签里面指定dpr的值,这样就不会出现你说的问题了

大家讲道理

解决移动端适配字体问题

就我所知讲讲

一般文字尺寸

考虑到字体的点阵信息,一般文字尺寸多会采用 16px 20px 24px等值,

若以rem指定文字尺寸,会产生诸如21px19px这样的值,会导致字形难看,毛刺,甚至黑块,故用px单位进行设置,然后根据设备的分辨率设置不同的font-size,因移动端大部分的设备独立像素不会相差太大,故可根据不同的dpr进行设置。

[data-dpr = "2"] p {

font-size:24px;

}

[data-dpr="3"] p{

font-size:36px;

}
/* 或者使用媒体查询的方法设置 */

标题类文字

可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过30px的话,也可以用rem设置字体。

需注意

  1. 使用淘宝的flexible方案布局并不会自动把你的设置的单位px转换成rem,当然用插件可以实现。

  2. 手淘方案会动态生成initial-scale,maximum-scale,minimum值,布局宽高使用rem,然后html标签设置font-size,利用fone-size来控制rem宽高,并且用设备像素比来设置dpr来适配不同移动设备的屏幕密度显示
    flexible.js源码

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!