84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
如果在移动项目中使用像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等值,
16px
20px
24px
若以rem指定文字尺寸,会产生诸如21px,19px这样的值,会导致字形难看,毛刺,甚至黑块,故用px单位进行设置,然后根据设备的分辨率设置不同的font-size,因移动端大部分的设备独立像素不会相差太大,故可根据不同的dpr进行设置。
rem
21px
19px
px
font-size
dpr
[data-dpr = "2"] p { font-size:24px; } [data-dpr="3"] p{ font-size:36px; } /* 或者使用媒体查询的方法设置 */
可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过30px的话,也可以用rem设置字体。
30px
使用淘宝的flexible方案布局并不会自动把你的设置的单位px转换成rem,当然用插件可以实现。
flexible
手淘方案会动态生成initial-scale,maximum-scale,minimum值,布局宽高使用rem,然后html标签设置font-size,利用fone-size来控制rem宽高,并且用设备像素比来设置dpr来适配不同移动设备的屏幕密度显示flexible.js源码
initial-scale,maximum-scale,minimum
html
fone-size
dpr来适配
这个是lib.flexible的文档说明,你可以去看看。
如果你不想改变dpr,完全可以在meta标签里面指定dpr的值,这样就不会出现你说的问题了
解决移动端适配字体问题:
就我所知讲讲
一般文字尺寸
考虑到字体的点阵信息,一般文字尺寸多会采用
16px
20px
24px
等值,若以
rem
指定文字尺寸,会产生诸如21px
,19px
这样的值,会导致字形难看,毛刺,甚至黑块,故用px
单位进行设置,然后根据设备的分辨率设置不同的font-size
,因移动端大部分的设备独立像素不会相差太大,故可根据不同的dpr
进行设置。标题类文字
可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过
30px
的话,也可以用rem
设置字体。需注意:
使用淘宝的
flexible
方案布局并不会自动把你的设置的单位px
转换成rem
,当然用插件可以实现。手淘方案会动态生成
initial-scale,maximum-scale,minimum
值,布局宽高使用rem
,然后html
标签设置font-size
,利用fone-size
来控制rem
宽高,并且用设备像素比来设置dpr来适配
不同移动设备的屏幕密度显示flexible.js源码