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

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 条评论
登录 后参与评论

相关文章

来自专栏性能与架构

Web前端开发技术栈

前端领域的发展非常迅猛,大前端的时代到来了,据说每隔12-24个月,前端的难度将增加一倍,从下面的技术栈就可以看出前端领域的丰富度和复杂度 核心概念 HTML ...

3699
来自专栏每日一篇技术文章

IOS开发必须知道的3DLabel实现过程

最近写了很多关于SceneKit 的入门教程文章,初衷就是想给应用增加一点色彩,今天就教大家实现一个简单的3DLabel 的小框架.如果你的应用中需要实现3D字...

581
来自专栏十月梦想

bootstrap之图片的响应式

前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

744
来自专栏HTML5学堂

新浪面试真题

1.请写出一张图片的HTML代码,已知道图片地址为“images/abc.jpg”,宽100px,高50px 2.请问display:none和visibili...

29911
来自专栏Coco的专栏

【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

1685
来自专栏前端儿

细说移动端 经典的REM布局 与 新秀VW布局

说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等...

1012
来自专栏前端小作坊

CSS animation和transition的性能探究

你可能已经在你的项目中用上了CSS Animation和CSS transition。如果还没有用上,那你有点out了。快去看下CSS-Trick上的这两篇关于...

561
来自专栏九彩拼盘的叨叨叨

Web动画性能介绍

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

843
来自专栏IMWeb前端团队

搞定这些疑难杂症,向css3动画说yes

本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

2258
来自专栏AndroidTv

【Android】属性动画的使用理解

属性动画的教程网上已经特别多了,本篇也不打算再去各种详解知识点,主要就是记录题主学习属性动画时的碰到的一些困惑,以及后来自己的理解。如果有人也碰到相似的问题,正...

2613

扫码关注云+社区