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

时间 2019-12-05

标签个人前端规范系列高清适配标准来就繁體版

原文原文链接

目标

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

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

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

设计稿里量下的宽高就是你须要的宽高吗？

不是的！！好比750px的iphone6 量出75px的物体，在375px的手机里确定只有35px。因此为了适配你必需转换成以屏幕宽度为标准的相对单位,因此换算过程确定是存在的,由于设计稿只是一个750的基准。
@x图只针对于图片和图标,这种须要用到位图的地方详细原理请点击查看.
其目标既是在等大的容器内装入像素更大的位图,从而补足像素点的缺失。
由于只有用到位图的地方才会出现像素缺失和像素丢失的情况,其余的元素都是系统绘制的矢量图形不受是不是高清屏幕的影响。react

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

@x图比实际须要小

若是@x图比实际须要小，那么图像就会模糊。android

@x图比实际须要大

若是@x图比实际须要大时会出现什么问题，其实这种状况也会出现问题只是问题不明显，会出现的问题就是图像失真，由于设备实际上没那么多像素点显示，就是丢失一些像素点。这种状况通常不易察觉,可是问题确定是存在的。这就是为何有些同志拿到大图了，却以为能够的缘由，由于只要他限制了图片的大小，他本身也看不出问题。
另外还有一点，就是web前端同志拿到的图片会过大,这个影响就比较大了。
因此不是用越大的图就越好。ios

解决方案

@x图标准仍是按照上方的标准。若是发现ps切下来的@2x比设计稿里的大了，既是出现错误。
另外程序端仍是建议按设计稿给用到图片的地方设置宽高,这样防止换了大图后图片撑开的问题。web

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 该基准值是根据你的定义变的关于基准值有问题可见
这样咱们就能够按照设计稿的大小写进程序,从而便于维护和识别sass

//辅助函数
// 例如: .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单位了😊],程序框架自动帮你转换😁，那么爽的吗？就是这么爽！由于别人Taro的目标是write one, use everyWhere!!

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

目标

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

设计稿里量下的宽高就是你须要的宽高吗？

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

@x图比实际须要小

@x图比实际须要大

解决方案

h5端解决方案

使用rem相对单位而不是px

存在问题

使用sass函数来辅助解决

使用相对单位vw

存在问题

使用sass函数来辅助编程

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

小程序端解决方案

1.小程序须要使用rpx

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

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