微信小程序 - 屏幕适配

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

思考

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

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

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

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

讲解

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

解决

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

示例：

老方式 20px
新方式 20rpx

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

借鉴文章

微信小程序适配 iPhone X 总结

微信小程序 - 屏幕适配相关推荐

微信小程序屏幕适配不同的iPhone
wx.getSystemInfo(Object object) | 微信开放文档 wx.getSystemInfo({success (res) {console.log(res.model)cons ...
微信小游戏屏幕适配方案
首发于我的个人博客-微信小游戏屏幕适配很久没有发文了,最近一直在研究微信小游戏,屏幕适配问题真的是哪里都存在. 无奈论坛资料及可行的解决方案还是太少,还是得靠自己. 且来看一看在微信上如何达到适配多 ...
微信小程序中适配iphoneX兼容性
今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,由于微信小程序在适配iphone x 的时候底部的横线会出现遮挡如图: 于是乎就翻了翻小程序的API文档,果不其然在小程序 ...
【IoT】产品设计：微信小程序如何适配不同机型
rpx是小程序中的尺寸单位,它有以下特征: 小程序的屏幕宽固定为750rpx,即750个物理像素,1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度 ...
微信小程序 - 屏幕亮度调节
为什么80%的码农都做不了架构师?>>> 最近使用微信小程序API wx.setScreenBrightness(OBJECT) 和 wx.getScreenBrightnes ...
vue/微信小程序标题栏适配
目录背景自定义标题 custom-page-title 原理解决办法: PS.注意代码使用示例使用注意参考资料背景 vue 编写小程序代码,打包为小程序,小程序原有title样式不太符 ...
微信小程序----布局适配与物理逻辑像素
屏幕尺寸屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 比如常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等如何计算手机尺寸? 知道手机屏幕的长和 ...
微信小程序-屏幕高度分析详解
screenheight代表手机屏幕的高度(包括最上方状态栏和webview渲染区域和tabbar与导航栏) windowHeight代表webview区域,不包含状态栏和导航栏和tabbar, 如果 ...
微信小程序屏幕适配器
屏幕适配器的作用是兼容不同型号的手机,进行适配,下面我用的是单独写个页面进行实现. 首先我们看到的是wxml页面: <view class="content">< ...

微信小程序 - 屏幕适配

微信小程序 - 屏幕适配相关推荐

最新文章

热门文章