可以让你在移动端布局像微信小程序布局一样轻松!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
demo.zip
wechat-layout.css

README.md

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行)