前端适配不同型号手机分辨率,100%还原UI设计稿的方案实践

针对不同手机分辨率,本文介绍了如何实现前端高清适配,确保100%还原UI设计稿。通过使用rem作为基础单位,结合屏幕DPR和宽度计算单位大小,配合网页缩放,保证在各种设备上布局不变形。同时,该方案允许直接用1px绘制物理像素边框。
摘要由CSDN通过智能技术生成

现在手机屏大小不一,而且屏幕硬件性能也各不相同,一般的UI设计都是基于特定机型画设计搞件的,常见的是基于iPhone6的分辨率设计2倍图,以iPhone6为例,屏幕物理像素宽度是750,网页宽度为375PX。开发中还要根据不同手机留出设计余量,因为不同分辨率的手机显示时会有拉伸位移。


网上也有一些方案,处理高清屏适配方案,但一般也只把DPR适配到2,彩用所有长度单位放大2位,网页整体缩放50%的的做法,比如ant-mobile就支持这种方式,它可以定义一个less常量“@hd”来定义CSS中使用的基础单位大小,但是这种方式在遇到网页实际宽度大于375的设备时,还是不能1:1的还源UI设计稿。


我个人在项目中采用的是更复杂的实现方式,可以实现适配DPR大于2的手机屏,并接近100%的还源UI设计稿。具体的适配技术各家大同小异,这里不再细说,我只给出我自己的适配方案。

同大多数适配方法一样,通过 rem 设计一个基础的大小单位 ,做为整个页面的基础单位,再根据屏幕物理DPR结合屏宽计算这个单位的大小,


  1. 基础单位 = 屏幕DPR * 网页宽度 / 375(设计稿基准为375)
  2. 网页缩放值 = 1 / 屏幕DPR

   比如我的方案是把rem设为10px 再乘以“基础单位”,这样在设置一个设计稿上14号字的时候,就写 1.4rem就可以了。另外编写页面布局时,也用这个计算出来的相对单位,这样可以做到不管什么样的屏幕,UI设计搞都不会因宽度变化而变形。另外,如果使用ant-mobile这样的支持高清方案的UI中间件,直接在配置中把它的LESS常量 “@hd”设置 为 “0.1rem”就可以了。


另外还有一个小的福利,就是在这个方案下,当你想画出“1物理像素”的细边框时,直接用 “1px”,就可以了,因为在这个方案下,1px对应的是一个物理像素。

下面给出我实践中使用的适配代码:(这是直接放在HTML文件中的版本)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值