关于屏幕适配html字体大小的问题
来源:2-4 首页-头部搜索
粉墨登场
2021-03-17 16:12:38
问题描述:
老师你好,之前学的屏幕适配中是以屏幕宽度750为设计稿,设定系数为18.75,视频中的老师以375宽度为设计稿,设定系数为10,美团的这个项目中我使用之前的屏幕适配方案发现头部的背景图片显示效果并不好,是不是因为具体设定的系数要以设计稿为准,动态地调整基准系数以及转换rem插件的值呢?
1回答
好帮手慕久久
2021-03-17
同学你好,解答如下:
1、通常情况下,系数可以随便定,不用考虑设计稿是多大的,它的值也不是固定(自己定就行),只要方便我们计算就可以了。但是实际开发中,往往会有一些系数用的比较多:比如750的设计稿,大家一般会使用18.75这个系数;而375的设计稿,大家一般会使用10;所以视频中,老师也选择了这两个系数。因此,实际开发中,大家一般不会随便选择系数,会根据设计稿,选一个比较常见的系数来用,这样可以与其他人的开发习惯保持一致。
2、rem插件的值,要与html的font-size保持一致,而html的font-size大小与系数有关。所以要根据系数、设计稿来调整插件的转换值,比如我们这里系数是10,设计稿是375,那么html的font-size就是375/10=37.5,因此插件系数要设置成37.5。
3、不管设计稿多大、系数是多少,只要保证页面上元素的尺寸与设计稿一致就可以。比如我们这里,设计稿是375,背景图高度是178px:
当前页面html的font-size是37.5,所以背景图的高度就是178/37.5=4.746667rem:
如果使用之前的适配方案,html的font-size是40px,对应设计稿是750px。当前背景图在375的设计稿上是178px,如果放到750的设计稿上,则需要放大2倍,即高度是356px,转成rem就是356/40=8.9rem,所以需要设置成8.9rem:
这样背景图不论在哪个页面上、系数是多少,都能正常展示。
祝学习愉快!
相似问题