wuguanchao / wechat-layout

可以让你在移动端布局像微信小程序布局一样轻松！

wechat-layout.css

wechat-layout.css可以让你在移动端布局像微信小程序一样轻松！

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

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

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

浏览器支持（兼容性）： IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome --- | --- | --- | --- | --- | --- | --- | --- | --- 9.0+ | 19.0+ | 26.0+ | 6.0+ |15.0+| 6.0+ | 4.4+ | 26.0+

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

安装：

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

使用方式

如果UI设计图是基于iPhone6的2倍图（750px）, 则只需要将设计稿除以一百即可，即如果设计稿某一个元素宽是300px,高是100px,则只需要在css里写：width: 3rem; height: 1rem; 它会以iPhone6为标准根据手机尺寸的不同进行自适应（具体效果请看demo）！

原理

• 基于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; 效果奇好！

运行demo

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

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

补充

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

wechat-layout's Issues

readme.md文件有错误

在浏览器支持那个表格错误