美文网首页微信小程序微信小程序开发者
小程序-弹性布局兼容不同机型的个人处理方法

小程序-弹性布局兼容不同机型的个人处理方法

作者: 书此奇谭 | 来源:发表于2018-05-21 18:08 被阅读5次

一般来说,小程序在不同机型的兼容问题,可以用rpx这个单位解决70%的问题

剩下的30%该如何解决?很多时候,布局问题可以用弹性布局解决很多,但有时弹性布局能在苹果上兼容得很好,但在安卓部分机型就会出现问题。如vivo、华为荣耀,等等。

这里,为了能达到想要的效果,可以再利用弹性布局进行“再布局”:

针对对象:span、i等行内元素,尤其是针对文字、图标上

正常情况下,一段文字(不换行)和图标搭配,文字和图标上下居中,左右距背景边缘等距,如下图:

(这是示意图,实际中可能没有边框,也不止一个图标、一段文字)

小程序的代码往往是:    

一般来说,这样的布局在调试工具、iphone上都是没问题的。但是在安卓部分机型上就会出现很奇特的效果,比如:

于是可以针对里面的图标和文字再做一次弹性布局:

    

对content1、content2内再做一次弹性布局,强制让其居中或者达到你想要的效果,具体如何做则实际情况实际对待,相信外层弹性布局都会写了,内层自然也会。

再回到像这种简单情形:

(左右、上下边距相等。)

在没有明确要求限制高度、宽度的情况下,不要擅自设定高度和宽度,很容易在提新需求时出现问题。

灵活使用padding,这个属性在绝大多数机型里都能兼容良好,比弹性布局的兼容更好。当出现比较复杂的布局时,则将弹性布局和padding结合使用,然后再针对真机兼容问题进行逐个击破。

以上,纯粹是前段时间做需求时遇到的问题和自己的解决方法,一家之言可能有误,欢迎指正和交流

相关文章

  • 小程序-弹性布局兼容不同机型的个人处理方法

    一般来说,小程序在不同机型的兼容问题,可以用rpx这个单位解决70%的问题 剩下的30%该如何解决?很多时候,布局...

  • flex弹性布局

    flex弹性布局与传统布局的区别 传统布局优点:兼容性好缺点:繁琐 flex弹性布局优点: 简单缺点:兼容性不好 ...

  • 小程序canvas兼容不同机型

    我们通常用iPhone6(375*667)开发,遇到这这种问题转化一下就行 用的时候*rpx就OK了!

  • 微信小程序canvas尺寸设置

    微信小程序尺寸设置可使用rpx来标记尺寸,类同rem可在微信小程序中自适应兼容换算不同的机型尺寸。但在小程序can...

  • 小程序基本布局

    小程序布局 微信小程序的页面开发和Web一样通过CSS对内容进行渲染,不同的是微信小程序利用Flex(弹性盒子)对...

  • Flex 布局教程:语法篇

    1、微信和网站的Flex 布局教程 Flex 布局兼容性 弹性容器的属性要使用弹性布局,通过 display: f...

  • flex布局笔记

    Flex 布局 简介 flex 布局 (Flexible 布局,弹性盒子)是在小程序开发经常使用的布局方式 官方文...

  • 02-小程序:Flex布局

    一、简介 1.1、flex 布局 (Flexible布局,弹性布局)是在小程序里面常用的布局方式官方文档:flex...

  • 微信小程序之获取系统信息

    在实际应用中,经常会遇到小程序在不同机型界面呈现上的兼容适配问题,这就需要我们能够获取到系统信息。恰好小程序就为我...

  • 高效移动web布局

    Flexbox弹性盒子布局 兼容ios可以android4.4以下,兼容旧版flexboxandroid4.4.及...

网友评论

    本文标题:小程序-弹性布局兼容不同机型的个人处理方法

    本文链接:https://www.haomeiwen.com/subject/ivsqjftx.html