轻量的移动端React组件库
移动端React组件库重新设计了Form那块组件,让数据校验变得更简单。欢迎提出更多优化建议,如有兴趣参与该项目,请邮件至:saytxk@gmail.com (-> . ->) 没错,我就是来骗 Star 滴。 项目地址: https://github.com/rc-mobile/rcm-mobile演示页面: https://rc-mobile.github.io/rcm-mobile/使用说明1.创建一个项目(走模版创建,无需任何配置,尚未开源)走模版创建的项目,无需下面配置操作,开箱即用。敬请期待... 2.依赖安装npm i -S rcm-mobile # 下载依赖3.初始HTML解决不同机型的多倍屏问题,通过设置视网膜显示屏来达到统一的目的。 组件尺寸大小都是基于 rem 开发,可以灵活调整以适用想要适配的视网膜显示屏通用做法:一倍视网膜显示屏方案<!DOCTYPE html><html lang="cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> </head> <body></body></html>自定义:多倍视网膜显示屏 第一步:确定视网膜显示屏倍数,如现在设成 2倍第二步:初始化rem的大小,html{font-size: 32px}。即浏览器默认的文字大小(16px) * 视网膜显示屏倍数第三步:恢复body下的文字大小,body{font-size: 16px}<!DOCTYPE html><html lang="cn" style="font-size: 32px;"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <script> (function () { var phoneScale = parseInt(window.screen.width) / 750 document.write('\<meta name="viewport" content="width=750, minimum-scale=' + phoneScale + ', maximum-scale=' + phoneScale + ', user-scalable=no, viewport-fit=cover">') })() </script> </head> <body style="font-size: 16px;"></body></html>4.全量使用(不推荐)组件使用实例: ...