微信小程序 - 屏幕适配

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20451879/article/details/89477464

现在大部分公司的UI、UE都已经采用了蓝湖这款工具,主要在于扩展性较强,故此篇我们借鉴于蓝湖的尺寸~

思考

1.移动端的适配方式是否与前端网页的适配方式相同?

  • 移动端的适配一般都会在不同手机分辨率下设置对应的dp或pt,然后设备进行对应适配
  • 前端的适配,因为没有做过,所以不太熟悉,但是自适应相比而言应该相对简单一些
  • 故适配方式应该不同 > <

2.微信小程序是属于前端?还是移动端?

  • 承载体是手机,但是却不需要安装apk
  • 语言、语法更偏向前端的html、css、js
  • 故我们先行考虑px的尺寸

讲解

1.对应尺寸包含的平台有IOS、Android、Web
在这里插入图片描述
2.因为我本身是做Android的,dp也是在此之前我用的最多的;但是争对于上文的思考,我们使用web的px尺寸
在这里插入图片描述
3.设置对应的px属性到小程序的wxml中 ,我们会发现位置被改变,和我想象的效果有偏差 ~ 因为效果图不太方便找,故口语讲述

解决

方式1:通用方式 px 转为 rpx

示例:

  • 老方式 20px
  • 新方式 20rpx

原因:为了解决不同屏幕尺寸的适配问题,小程序自己定了一个尺寸单位:rpx(responsive pixel),它可以根据屏幕宽度进行自适应。小程序中规定, 所有设备的屏幕宽度都为 750rpx ,根据设备屏幕实际宽度的不同,1rpx 所代表的实际像素值也不一样

借鉴文章

猜你喜欢

转载自blog.csdn.net/qq_20451879/article/details/89477464
今日推荐