微信小程序-Image的widthFix属性和rpm尺寸的使用

时光斑驳了记忆 2018-02-01 16:14:20 ⋅ 162 阅读

1、微信小程序Image标签的widthFIx,图片自适应

在做微信小程序的商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然,如下图所示:

大家发现是不是比较模糊并且有压缩,不能达到预期效果。

解决方法如下:
样式设置宽度100%

.img{
 
  width: 100%;

}

添加属性 mode="widthFix"

<image class="img" src="../../images/hello.png" mode="widthFix">

效果如下图所示:


是不是效果非常明显呢?赶紧试试吧!


2、微信小程序尺寸单位-rpx

在布局样式的时候发现微信小程序有自己的css尺寸单位-rpx 比px 多了个r。接下来简单介绍一下怎么使用微信小程序的rpx

rpx简介:

      rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0。1rpx = 0.5px = 1物理像素。具体在iphone版本上对应如下:

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx 注:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。建议:设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px,这样的话,设计图上量出来的尺寸是多少px就是多少rpx,至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算


更多精彩内容请关注“IT实战联盟”公众号哦~~~




全部评论: 0

    我有话说:

    程序实战篇:商品属性联动选择(案例)

    本期程序实战篇来做一个电商网站经常用到-商品属性联动选择效果,素材参考了一点点

    程序实现商品数量加减

    这是一个用程序原生代码实现数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序 - iconfont 图标字体

    你还在使用图片作为程序图标?大猪告诉大家如何在程序使用iconfont字体图标

    程序商城(九):授权并实现个人中心页面页面

    实现商城授权并获取用户信息个人中心页面布局

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    精品推荐:程序常见UI框架/组件库

    想要开发出一套高质量程序,运用框架,组件库是省时省力省心必不可少一部分,随着程序日渐火爆,各种不同类型

    程序电商实战-首页(上)

    上一篇:程序电商实战-入门篇 嗨,大家好!经过近两周精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序实战篇:如何解决https域名问题 ?

    开发自己程序绕不开https问题,为了能在程序中调用我们自己API服务请打开看一看吧!!!

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序中商品列表流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序电商实战-首页(下)

    上一篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏广告轮播给做完了,那么接下来会继续

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据并加载

    「开源资讯」BookChat v2.4 发布,通用书籍阅读程序

    BookChat - 面向程序员开源书籍文档阅读学习程序

    程序实战篇:基于wxcharts.js绘制移动报表

    程序图表插件(wx-charts)是基于canvas绘制,体积巧,支持图表类型饼图、线图、柱状图 ......

    程序电商实战-商品详情(上)

    先看一下今天要实现程序商品详情页吧!

    程序:最新登录授权并获取openid等信息

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框开发方式将逐步不再支持。从2018年4月30日开始,程序游戏体验版、开发版调用 wx.getUserInfo 接口,将

    程序-template使用:实现购物车商品数量加减功能

    上一篇我们实现了购物车功能,里面有用到template模板功能来实现购物车商品数量加减价格计算功能......

    程序电商实战-购物车(上)

    好久没更新程序电商实战文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间。在这几天将会有新版 程序电商教程推出.......

    程序实战篇:程序之页面数据传递

    我们在写程序时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数......