小程序样式--响应式布局方式

最新推荐文章于 2023-09-13 17:13:57 发布

程序媛-静儿

最新推荐文章于 2023-09-13 17:13:57 发布

阅读量1.5k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_36711388/article/details/109360050

版权

本文介绍了小程序中常见的响应式布局方式，包括rpx布局、scale伸缩布局、流式布局、rem布局以及响应式媒体查询。rpx布局适用于不同平台，scale布局通过拉伸页面实现适配，流式布局使用百分比或flex，rem布局则依赖于根元素font-size，而媒体查询适合维护成本较高的场景。

摘要由CSDN通过智能技术生成

ps: 分享三款小程序UI WeUI、iview Weapp、 Vant Weapp

rpx布局
微信的rpx，就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸缩布局的width=750。通过rpx，大家只需要根据750的设计稿写代码即可，不必担心它在各个平台的适配情况，实际上在各个平台都会长得一样。
以下简单介绍其他布局
scale伸缩布局
scale伸缩布局顾名思义，就是通过拉伸缩小页面来达到自适应。有两种方法，一是通过js更改viewport的initial-scale，这种方法比较麻烦，另一种是直接写死viewport的宽度，例如：，意思就是告诉浏览器：这个页面我要一直用360px的宽度处理，在不同的尺寸上，麻烦伸缩一下。假如在320的iphone上，放大到360，在375的iphone上，缩小到360。这样我只需要以360这个尺寸出设计稿就行，页面会伸缩适应。实际效果可以通过手机访问：scale伸缩demo。scale伸缩的问题在于，不能显式设置minimum-scale=1.0，否则就达不到效果。而这个值是chromium37以上的webview触发gpu raster的一个条件，所以用这种方法就没法利用gpu raster