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

Tecode 发布于2019-08-30 15:43 / 2731人阅读

摘要：因为只有用到位图的地方才会出现像素缺失和像素丢失的状况其他的元素都是系统绘制的矢量图形不受是否是高清屏幕的影响。解决方案图标准还是按照上方的标准。比如大小为的按钮按上面标准换算成为这就蛋疼了，你无法直观看出这个按钮多大修改起来更是蛋疼。

目标

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，其余的所有页面元素也将会进行改变。

详细原理请点击查看

存在问题

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

使用sass函数来辅助解决

假设对于一个iphone6的视觉稿，我们定义它的基准值就是75 该基准值是根据你的定义变的关于基准值有问题可见
这样我们就可以按照设计稿的大小写进程序,从而便于维护和识别

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

使用相对单位vw

原理与上面的rem相同,也来得更简单。因为vw本来就相对可视窗口宽度的百分比不受显示器分辨率的影响。

存在问题

需要注意有版本要求：android4.4以上版本；ios8以上版本最新兼容性查看
另外也存在百分比在设计稿中转换到程序上的不直接问题

使用sass函数来辅助编程

同样在定好设计稿后，可以书写sass函数来辅助编程
假设设计稿为750*1330 上的按钮大小为120px,那么可以这么书写

//.px2rem(width, 120);
@mixin px2vw(@name, @px){
    @{name}: @px / 750 * 1vw;
}

图片的话推荐直接使用@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单位了

GPU云服务器云服务器标准规范首屏标准前端规范前端规范文档

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116082.html

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

摘要：因为只有用到位图的地方才会出现像素缺失和像素丢失的状况其他的元素都是系统绘制的矢量图形不受是否是高清屏幕的影响。解决方案图标准还是按照上方的标准。比如大小为的按钮按上面标准换算成为这就蛋疼了，你无法直观看出这个按钮多大修改起来更是蛋疼。目标 1.明确统一@x图的标准，以750x1334切下来的图为@2x的标准2.使用以屏幕宽度为基准的相对单位,为了适配,从设计稿到成品肯定存在换算过...

Carbs 2019-08-02 16:11 评论0 收藏0
我的前端规范系列-高清屏适配[按标准来就行]

摘要：因为只有用到位图的地方才会出现像素缺失和像素丢失的状况其他的元素都是系统绘制的矢量图形不受是否是高清屏幕的影响。解决方案图标准还是按照上方的标准。比如大小为的按钮按上面标准换算成为这就蛋疼了，你无法直观看出这个按钮多大修改起来更是蛋疼。目标 1.明确统一@x图的标准，以750x1334切下来的图为@2x的标准2.使用以屏幕宽度为基准的相对单位,为了适配,从设计稿到成品肯定存在换算过...

阿罗 2019-08-23 16:43 评论0 收藏0
我的前端规范系列--前言

摘要：前言程序开发变是常态不变是非常态只有定好不变的规范并做得足够好才能更好的应付变化。该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。前言程序开发变是常态,不变是非常态只有定好不变的规范,并做得足够好,才能更好的应付变化。该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。现主要涉及如下:图标工程化[好用的图标...

史占广 2019-08-23 16:43 评论0 收藏0