vantui小程序自适应大小

这是由于开发者设置可以根据不同的屏幕大小自动调整组件的大小和布局。开发者可以使用rpx作为单位，rpx是相对于屏幕宽度的单位，1rpx等于屏幕宽度的1/750。这样可以保证在不同的屏幕上显示效果基本一致。

微信小程序这个幺蛾子，不仅自己搞了一套所谓 WXSS 的样式表，还创造了一个新的单位 rpx 。

这时候问题就来了，现在的设计稿一般基于 iPhone6（375px × 667px），势必在其他尺寸的手机中有有所不同。在手机浏览器上，为了消除差异，我们可以使用 rem 作为单位，通过改变 html 下的 font-size 来消除在不同尺寸手机上的差异，但是在微信小程序上只能通过 rpx 来消除。

在使用 sass 时，前辈们已经实现了从 px 转换到 rem 的各种轮子，其中比较赞的有 @pierreburel 所编写的 sass-rem 。本文所使用的轮子也是 fork 自 sass-rem 。

基于前辈们的努力，我便重写了 sass-rem ，以适用于 rpx 的场景。

具体项目请参见： sass-rpx

SCSS

CSS

SCSS

CSS

在ios部分手机里面出现边框模糊问题

若只改宽度后还是出现模糊，需要高度也设置为(奇数或奇数5) 2

2修改css 通过设置after样式设置边框

小程序详情页尺寸是75016001400

你在设计稿件中可以把做成750px宽，而高度，我建议你做成1600，然后掐头去尾留1400高度作为画布的高度。并且要求考虑到屏幕变长变短后UI是否可以适应。(这个和设计自适应网页一致)

为什么要这样做？

不同手机高度是不相同的。当然宽度也不相同，但是小程序给了你一种机制rpx，可以把屏幕宽度确定在750rpx，那么只要考虑高度上适应。

做到含系统UI1600的话，差不多是小屏幕和大屏幕的折中。那么你在这个基础上调整，能够比较方便。

如UI要考虑到横屏？

那这个时候就很不一样了喔，要把高宽思维调过来。

如果内容要支持高清？

那么你设计UI的时候，按照750px屏宽做可以的。

但是在处理内容的时候可以再翻大一倍。代价就是变大了。这个权衡好了再定。如果一个界面一下子打开一百个内容的列表，一口气要加载十几m，那体验也会糟糕。

如果不是设计，是开发定义css怎么办？

和其他人不同，我不建议用750rpx定义。如果需要横向盛满，那么应该用100%，或者更酷的100vw。

如果是UI元素的，用em，rem。这些都是CSS原生的概念。和一个像素被智能切成了多少个像素没关系。

这样就可以延续更加成熟的CSS框架思想。

关于是否使用rpx还是px，首先需要明白两者之间的区别。

rpx：微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。微信官方建议视觉稿以iphone6为标准，一般设计师出图为2倍图。

px：iphone6上1px=2rpx

1rpx相当于1个物理像素，何为物理像素，就相当于我们所使用的屏幕的尺寸，只不过换了一种说法叫物理像素，而我们平时css中所用到的px,实际上是数据显示的尺寸，比如文字，、设计样式的盒子的大小1rpx的出现为我们搭起了物理像素与样式像素px之间的桥梁，而且根据屏幕宽度进行自适应

<view class="box">rpx的像素</view>

<view class="bo">px的像素观察</view>

box{  width:300rpx;  height:200rpx;  border:1rpx solid black;  font-size:30rpx;}bo{   width:300px;  height:200px;  border:1px solid black;  font-size:30px;}

结果：

所以，小程序中字体大小用rpx还是px要结合设计师出图的文字大小，建议的话还是以rpx为主。

该功能基于vue-cli3；cli2的方法大差不差

以上两步就可以实现小程序中rpx功能，针对设计稿为750px的移动端。

以上就是关于vantui小程序自适应大小全部的内容，包括:vantui小程序自适应大小、sass-rpx 微信小程序开发 px -> rpx 转换、微信小程序1rpx边框问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！