用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 小技巧系列 查看内容

我的前端规范系列-高清屏适配[按标准来就行]

Rolan 2019-4-9 00:29

目标1.明确统一@x图的标准,以750x1334切下来的图 为@2x的标准2.使用以屏幕宽度为基准的相对单位,为了适配,从设计稿到成品肯定存在换算过程3.为位图的容器设置宽高适配后效果图:基本不会出现很不理想的状况什么才是 ...

目标

1.明确统一@x图的标准,以750x1334切下来的图 为@2x的标准

2.使用以屏幕宽度为基准的相对单位,为了适配,从设计稿到成品肯定存在换算过程

3.为位图的容器设置宽高

适配后效果图: 基本不会出现很不理想的状况

什么才是标准的@2x图?

其实已750x1334设计出来的图,切下来,刚刚好就是2x图,缩小1倍就是1x,乘以1.5就是3x图

设计稿里量下的宽高就是你需要的宽高吗?

不是的 !!比如750px的iphone6 量出75px的物体,在375px的手机里肯定只有35px。所以为了适配你必需转换成 以屏幕宽度为标准的相对单位,所以换算过程肯定是存在的,因为设计稿只是一个750的基准 。

@x图只针对于图片和图标,这种需要用到位图的地方 详细原理请点击查看 .

其目标既是在等大的容器内装入像素更大的位图,从而补足像素点的缺失。 

因为只有用到位图的地方才会出现像素缺失和像素丢失的状况,其他的元素都是系统绘制的矢量图形不受是否是高清屏幕的影响。

@x图过大过小会出现什么问题?

@x图比实际需要小

如果@x图比实际需要小,那么图像就会模糊。

@x图比实际需要大

如果@x图比实际需要大时会出现什么问题,其实这种情况也会出现问题只是问题不明显,会出现的问题就是图像失真,因为设备实际上没那么多像素点显示,就是丢失一些像素点。这种情况一般不易察觉,但是问题肯定是存在的。这就是为什么有些同志拿到大图了,却觉得可以的原因,因为只要他限制了图片的大小,他自己也看不出问题。

另外还有一点,就是web前端同志拿到的图片会过大,这个影响就比较大了。

所以不是用越大的图就越好。

解决方案

@x图标准还是按照上方的标准。如果发现ps切下来的@2x比设计稿里的大了,既是出现错误。

另外程序端还是建议按设计稿给用到图片的地方设置宽高,这样防止换了大图后图片撑开的问题。

h5端解决方案

使用rem相对单位而不是px

rem是指相对于根元素的字体大小的单位。

那么根据该原理:我们只需能动态获取屏幕的dpr及宽度信息,并改变根元素的font-size,其余的所有页面元素也将会进行改变 。

<html data-dpr="1" style="font-size: 41.4px;">
</html>

详细原理请点击查看

存在问题

但是该方案有个问题,rem单位很不直观。比如大小为80px的按钮, 按上面标准换算成rem为1.946rem[这就蛋疼了,你无法直观看出这个按钮多大,修改起来更是蛋疼。如果没有一套优雅的管理方案,后期修改基本靠感觉或者画点时间计算下==],接下来和大家聊聊如何优雅的使用rem单位。

使用sass函数来辅助解决

假设对于一个iphone6的视觉稿,我们定义它的基准值就是75 该基准值是根据你的定义变的 关于基准值有问题可见

这样我们就可以按照设计稿的大小写进程序,从而便于维护和识别

//辅助函数
// 例如: .px2rem(height, 80);
@mixin px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

图片的话推荐直接使用@2x 或者 使用矢量图形

图片这里因为h5端特殊,既要考虑流量,又要考虑清晰度,这里推荐还是直接使用@2x图吧!别折腾了!

小程序端解决方案

1.小程序需要使用rpx

rpx为小程序自己的单位,会对设备进行适配

rpx与[750*1330]设计稿px的关系1px==1rpx,但是在iphone6上0.5px==1rpx 详见

2.使用Taro框架[安利一波]

Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到 微信/百度/支付宝/字节跳动小程序 、 H5 端 以及 移动端(React-Native)。

Taro.js是京东出品的小程序框架,经使用除了不支持一些react语法外,基本无大槽点[这里不经要吐槽下腾讯官方的wepy,真是坑死人不偿命!请慎用慎用!]

该框架直接服务到位,代码直接书写px单位[又不用记多一个rpx单位了:blush:],程序框架自动帮你转换:grin:,那么爽的吗? 就是这么爽!因为别人Taro的目标是write one, use everyWhere!!

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 好炫 来自: segmentfault