css - 移动端rem适配问题

问题描述

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

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

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

问题解答

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

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

就我所知讲讲

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

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

[data-dpr = '2'] p {font-size:24px;}[data-dpr='3'] p{font-size:36px;}/* 或者使用媒体查询的方法设置 */标题类文字

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

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

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