微信小程序布局单位的使用

rpx单位是微信小程序中css的尺寸单位rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为750 px,则共有个750 物理像素,则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素

但是不同iOS设备上,px和rpx换算有些区别:

iphone5 上: 1rpx = 0.42px 1px = 2.34rpx

iphone6 上: 1rpx = 0.5px 1px = 2rpx

iphone6S 上: 1rpx = 0.552px 1px = 1.81rpx

在不同设备上rpx与px的转换是不相同的,但是宽度的rpx却是固定的,所以可以使用rpx作为单位,来设置布局的宽高,不是所有的单位都适合rpx,字体不适合rpx,会导致不同设备看不清。

设计稿恰巧是750px,量出宽度是多少,那么你就定义多少rpx,假设设计稿640px宽度则就需要转换一下,你需要转换一下 1px = 750/640 rpx

微信小程序也支持rem尺寸单位rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx

在开发中,

1). 需要导入js

    (function (doc, win) {  
          var docEl = doc.documentElement,  
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  
            recalc = function () {  
              var clientWidth = docEl.clientWidth;  
              if (!clientWidth) return;  
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';  
            };  
      
          if (!doc.addEventListener) return;  
          win.addEventListener(resizeEvt, recalc, false);  
          doc.addEventListener('DOMContentLoaded', recalc, false);  
    })(document, window);  

2). 根据设计稿宽度算出rem和px直接的转换公式

例如:640px的设计稿,转换公式就是按照上面js中这句而来【docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'】,最终 1rem = 20 x 640/320 + 'px' = 40px;

3). 根据设计稿按照1rem = 40px 对着各个元素进行单位转换

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

什么是视口(视窗)在桌面端,视口在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

vw:viewpoint width,视口宽度,1vw等于视窗宽度的1%。

vh:viewpoint height,视口高度,1vh等于视窗高度的1%。

vw和vh是css3中的新单位,是一种视窗单位,在小程序中也同样适用。

  • 小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw
  • 小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh
图片.png

vmin:vw和vh中较小的那个。

vmax:vw和vh中较大的那个。

vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持

其它的单位还有:

%:百分比

in:寸

cm:厘米

mm:毫米

pt:point,大约1/72寸

pc:pica,大约6pt,1/6寸

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:再次认识font

一、前言                                 文字承载着站点内涵,而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深...

25910
来自专栏Android机器圈

Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

PS:在这之前也就是上一篇介绍了MaterialDesign一些滑动删除、标题栏的悬浮效果等,如果没看过第一篇的小火鸡可以看一下,因为这篇是接着上一篇写的,有一...

37610
来自专栏拂晓风起

【Fanvas技术解密】HTML5 canvas实现脏区重绘

1722
来自专栏生信宝典

一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。

9043
来自专栏非著名程序员

基础篇章:React Native 之 View 和 Text 的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 从今天开始我们进入基础组件也就是一些简单控件...

2685
来自专栏AI研习社

GPU 加速到底是个啥?

众所周知,网页不仅应该被快速加载,同时还应该流畅运行,比如快速响应的交互,如丝般顺滑的动画…… 一. GPU 加速能做什么? ? 首先我们要了解什么是 16...

4057
来自专栏小樱的经验随笔

关于前端的photoshop初探的学习笔记

写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来。 温馨提示:比较乱,写给自...

2906
来自专栏非著名程序员

一个类似于进度和打卡进度的自定义view

一个类似于进度和打卡进度的自定义view ---- 如下图: ? 看GIF岂不是更好 ? ---- 这个view在现在的app中挺常见的,基本都是这个套路, -...

1938
来自专栏我的前端

如何用纯 CSS 创作一个小球上台阶的动画

https://github.com/comehope/front-end-daily-challenges

1012
来自专栏美团技术团队

关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!

背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也...

3357

扫码关注云+社区