移动端卡片拖动切换效果_颠覆传统布局，移动端实现rpx效果（看着设计稿闭着眼画）...

什么是rpx：

微信小程序在布局中普遍使用rpx作为尺寸单位，rpx的效果是可以根据屏幕尺寸进行自适应！规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

也就是说你只需要安装一种手机尺寸画，把像素全都写死，它就可以按照不同的手机尺寸进行自适应，设计图上是多少就写多少，一天画完静态不是梦！

en,我把这个写成了一个小小的开源项目。。

先说用它的好处。

使用wechat-layout.css有什么优点？

• 在移动端画出真正的1px边框
• 您写出来的代码在不同的手机中会自适应
• 只有2k的大小(没压缩)，超轻量级
• 原理简单，一看就会
• 基于reset.css重置html标签默认样式

浏览器支持(兼容性)：

不过移动端都用Webkit内核，讲道理来说应该是没有问题的。

安装：

大家下载完之后把我根文件中的`wechat-layout.css`拷贝出来即可

使用方式

如果UI设计图是基于iPhone6的2倍图(750px), 则只需要将设计稿除以一百即可，即如果设计稿某一个元素宽是300px,高是100px,则只需要在css里写：width: 3rem; height: 1rem;

它会以iPhone6为标准根据手机尺寸的不同进行自适应(具体效果请看demo)！

运行demo

使用 npm install 安装项目所需依赖

然后使用 npm run serve启动项目即可

补充

• wechat-layout.css中现在是3k，因为我没有压缩。
• 其次我写了几个demo所需要的公共class类在里面( 单行，多行打点，箭头之类的 )。
• 大家可以把203行往后的删去来减轻体积。
• 大家可以压缩一下在使用。。。 我不会压缩...
• 因为和我demo用的mint-ui样式冲突，我把 input表单的权重(强制清除边框)调到了最高。大家不需要的话可以删掉.(好像在194行)。

原理

• 基于css3中的vw以及rem实现。
• 即 750rpx(2倍图宽度)等于 375px。
• 则1vw == 3.75px == 7.5rpx。
• 有了这个换算，那么我们想让 h5 实现 小程序效果只需要让 1rem 打出 1rpx的效果即可。
• 也就是：1vw 除以 7.5rpx 1 / 7.5 = 0.1333333333vw。
• 这个时候我们给 html标签设置 font-size: 0.1333333333vw 就实现了 1rem等于1rpx的效果。
• 但是我用webpack发现给html标签设置的font-size小于1vw是不会生效的(普通link引入可以)。
• 于是就设置成 font-size: 13.333333333333333333333333333333333333333vw; 效果奇好！

效果图--移动端

码云地址：https://gitee.com/wuguanchao/wechat-layout.css

gitHub地址：https://github.com/WuGuanChao/wechat-layout

各位大佬们要是觉得有趣帮忙点颗星好嘛。。

标题有点夸张，感觉自己有UC小编的潜质，那个demo是我写的第一个移动端，有啥不足的大家可以和我说下吗, 谢谢。。