Skip to content
/ cmui Public

自写的自适应跨平台css3框架,可应用于web、app、小程序

License

Notifications You must be signed in to change notification settings

aiplat/cmui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cmui

超萌框架,快捷布局

  • 自己写的布局框架,自适应跨平台设备

  • 可应用于web、app、小程序

  • 下一版本将添加组件形式

  • 实例1 webapp网站 AI智能空间 https://aiplat.com

  • 实例2 跨平台app 亲信地铁 腾讯应用宝或苹果appstore搜索‘亲信地铁’、web访问http://m.aiplat.com/metro

  • 实例3 微信小程序 娱乐计分器

  • cmui包含cmreset.css和cmstyle.css、aiplat.css三个css文件,同时生成可用于微信小程序开发的wxss文件

  • 三个文件,gzip压缩后12k


cmreset.css说明

  • 1,盒模型采用IE盒子,即css3中的box-sizing值为border-box

cmstyle.css说明

1,栅格系统

  • 请在cmstyle.css文件搜索 ‘栅格系统’
  • 兼容pc与mobile写法:(pc端以1200px居中,mobile以100%适配)
    <div class="cm_main2">
    <div class="cm_main">
    <ul class="cm_pc_12">
    <li class="cm_pc_12 cm_mob_6">显示主体div</li>
    <li class="cm_pc_12 cm_mob_6">显示主体div</li>
    <li class="cm_pc_4 cm_mob_12">显示主体div</li>
    <li class="cm_pc_4 cm_mob_12">显示主体div</li>
    <li class="cm_pc_4 cm_mob_12">显示主体div</li>
    </ul>
    </div>
    </div>

2,div单位主要为em(优于rem),其他部分如border小尺寸单位为px

  • 例如: .cm_wh2{width:2em;height:2em} 1em等于一个字的字体大小
  • 例如: .cm_bb1ce{border-bottom:1px solid #eeeeee}

3,<span class="cm_fs05">cmui</span>

  • 意思cmui字体大小对应.cm_fs05{font-size:0.5em}
  • .cm_fs05中cm为cmui的前缀cm,
  • .cm_fs05中fs为font-size两个单词各自的首字母集合,所有类命名均类似
  • .cm_fs05中05为0.5em大小,em为如上2说明
  • .cm_fs06.....cm_fs3--06、07、08、09、1、11、12、13、15,2,3雷同 .cm_fs3{font-size:3em}

4,以上三个css文件的说明文档还有很多未写,后续完善,多谢支持与赞.


兼容性

  • 1,实测兼容ie8
  • 2,兼容手机、电脑、平板等等一切联网设备
  • 3,一次布局,适配所有平台
  • 4,可应用于web、app、小程序

构建

About

自写的自适应跨平台css3框架,可应用于web、app、小程序

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published