找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序综合交流

关注:59

所属分类: 微信开发 微信小程序综合交流

微信小程序用户交流版块,希望同学们积极发言,不过大家不要恶意发布广告哦!

[经验分享] 微信小程序屏幕自适应的几种方式

[复制链接]
查看: 146|回复: 2
最佳答案
0 

4

主题

4

帖子

138

积分

新人求带

积分
138
 楼主| 发表于 2017-12-5 14:15:18 | 显示全部楼层 |阅读模式
微信小程序的像素大小使用rpx,rpx换算px屏幕宽度/750。

传统的自适应布局有几种:

响应式,根据屏幕大小配置多个样式文件。

使用em,rem.rem是页面的font-size尺寸,不同的页面设置不同的font-size。
  1.     (function winInitFontSize(){
  2.             window.onresize = initFontSize;
  3.             function initFontSize(){
  4.                 var winWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  5.                 //rem的基数设置大一点,可以减少误差
  6.                 document.getElementsByTagName("html")[0].style.fontSize = ((winWidth > 750 ? 750 : winWidth)/750) * 100 + 'px';
  7.             }
  8.             initFontSize();
  9.         })();
复制代码

使用百分比或者flex,铺满屏幕,高度字体还使用px.

scale通过拉伸缩小页面自适应。直接写死viewport的宽度。这种方式不可以设置minimum-scale=1.0。
  1. <meta name="viewport" content="width=375, user-scalable=no">
复制代码

使用类似rpx的方式:
  1. width: calc((100vw / (750/16)) - 0.1px);
  2. height: calc((100vw / (750/30)) - 0.1px);
复制代码

假如利用sass倒是可以设置变量,不用一条一条这样写。只是这种在浏览器中,有时会大得可怕。因为100是浏览器的宽度,而不是可使用的宽度。而将100vw写成100%会不起效果。可能100%是动态的,导致不起作用。

有新的收获了再来更新文档。
回复

使用道具 举报

最佳答案
0 

3

主题

13

帖子

145

积分

新人求带

积分
145
发表于 2017-12-6 04:05:47 | 显示全部楼层
:)))))))))))))))))))))))))))
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

91

帖子

303

积分

略知一二

积分
303
发表于 5 天前 | 显示全部楼层
再来更新文档
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com