<#-- 标题 -->

使用rem：

ZmUI整体风格使用 rem 作为长度单位，它是相对于 html 元素的 font-size 的一个单位。建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。
关于其定义，可以参考 MDN上的定义。

<#-- HTML 标签的 font-size 定义 -->

HTML 标签的 font-size 定义

一、以 iphone6 为基准

以 iphone6 的屏宽 375 作为媒体查询 font-size 计算的标准，再向更大更小进行变化；
此时 html 标签的 font-size 为 100px，默认字体大小为 .16rem(16px)，所有以 rem 定义的大小、长度均以此为基准进行计算。

二、媒体查询计算 font-size

@media screen and (max-width: 320px) { html { font-size:83.33px; font-size:26.66667vw } } ... @media screen and (min-width: 376px) and (max-width:393px) { html { font-size:104.8px; font-size:26.66667vw } } ... @media screen and (min-width: 769px) { html { font-size:204.8px } }

<#-- 通用的字体大小定义 -->

通用的字体大小定义

暂时保留 ZhiqimUI 中 px 的定义，如：z-px12、zi-px20。
新增 rem 的定义方式，如：z-rem12、zi-rem20，分别表示 font-size:.12rem 和 font-size:.2rem !important。

.z-px10{font-size:10px;} .z-px11{font-size:11px;} .z-px12{font-size:12px;} .z-px13{font-size:13px;} .z-px14{font-size:14px;} .z-px15{font-size:15px;} .z-px16{font-size:16px;} .z-px17{font-size:17px;} .z-px18{font-size:18px;} .z-px19{font-size:19px;} .z-px20{font-size:20px;} .z-px22{font-size:22px;} .z-px24{font-size:24px;} .z-px26{font-size:26px;} .z-px30{font-size:30px;} .z-px40{font-size:40px;} .z-px50{font-size:50px;} .zi-px10{font-size:10px !important;} ... .zi-px50{font-size:50px !important;} .z-rem12{font-size:.12rem;} .z-rem13{font-size:.13rem;} .z-rem14{font-size:.14rem;} .z-rem15{font-size:.15rem;} .z-rem16{font-size:.16rem;} .z-rem17{font-size:.17rem;} .z-rem18{font-size:.18rem;} .z-rem19{font-size:.19rem;} .z-rem20{font-size:.2rem;} .z-rem22{font-size:.22rem;} .z-rem24{font-size:.24rem;} .z-rem25{font-size:.25rem;} .z-rem26{font-size:.26rem;} .z-rem28{font-size:.28rem;} .z-rem30{font-size:.3rem;} .z-rem32{font-size:.32rem;} .z-rem35{font-size:.35rem;} .z-rem36{font-size:.36rem;} .z-rem40{font-size:.4rem;} .z-rem50{font-size:.50rem;} .zi-rem12{font-size:.12rem !important;} ... .zi-rem50{font-size:.50rem !important;}

<#-- width 和 height 定义 -->

width 和 height 定义

原 ZhiqimUI 中的定义具体数值的 z-w*、z-h* ，如： z-w100、z-h100；统一改成用 z- 前缀，单位为 rem，如： z-w100、z-h100。
原 ZhiqimUI 中的定义百分比的 z-w5p、z-h50p 保留。

.z-w0{width:0;} .z-w10{width:.1rem;}.z-w12{width:.12rem;} .z-w14{width:.14rem;}.z-w15{width:.15rem;} .z-w16{width:.16rem;}.z-w18{width:.18rem;} .z-w20{width:.2rem;}.z-w22{width:.22rem;} .z-w24{width:.24rem;}.z-w25{width:.25rem;} .z-w28{width:.28rem;}.z-w30{width:.3rem;} .z-w35{width:.35rem;}.z-w40{width:.4rem;} .z-w45{width:.45rem;}.z-w50{width:.5rem;} .z-w55{width:.55rem;}.z-w60{width:.6rem;} .z-w65{width:.65rem;}.z-w70{width:.7rem;} .z-w75{width:.75rem;}.z-w80{width:.8rem;} .z-w85{width:.85rem;}.z-w90{width:.9rem;} .z-w95{width:.95rem;}.z-w100{width:1rem;} .z-w110{width:1.1rem;}.z-w120{width:1.2rem;} .z-w130{width:1.3rem;}.z-w140{width:1.4rem;} .z-w150{width:1.5rem;}.z-w160{width:1.6rem;} .z-w170{width:1.7rem;}.z-w180{width:1.8rem;} .z-w190{width:1.9rem;}.z-w200{width:2rem;} .z-w230{width:2.3rem;}.z-w250{width:2.5rem;} .z-w270{width:2.7rem;}.z-w300{width:3rem;} .z-w400{width:4rem;}.z-w500{width:5rem;} .z-w600{width:6rem;}.z-w700{width:7rem;} .z-w800{width:8rem;} .zi-w0{width:0 !important;} ... .zi-w800{width:8rem !important;} .z-w5p{width:5%;}.z-w8p{width:8%;} .z-w10p{width:10%;}.z-w12p{width:12%;} .z-w15p{width:15%;}.z-w30p{width:30%;} .z-w40p{width:40%;}.z-w60p{width:60%;} .z-w70p{width:70%;}.z-w80p{width:80%;} .z-w90p{width:90%;}.z-w100p{width:100%;} .z-w100p2,.z-w50p{width:50%;} .z-w100p3{width:33.333333%;} .z-w100p4,.z-w25p{width:25%;} .z-w100p5,.z-w20p{width:20%;} .z-w100p6{width:16.666666%;} .z-w100p7{width:14.285714%;} .z-w100p8{width:12.5%;} .z-w100p9{width:11.111111%;} .zi-w5p{width:5% !important;}.zi-w8p{width:8% !important;} ... .zi-w100p9{width:11.111111% !important;} .z-h0{height:0;} .z-h10{height:.1rem;}.z-h12{height:.12rem;} .z-h14{height:.14rem;}.z-h15{height:.15rem;} .z-h16{height:.16rem;}.z-h18{height:.18rem;} .z-h20{height:.2rem;}.z-h22{height:.22rem;} .z-h24{height:.24rem;}.z-h25{height:.25rem;} .z-h28{height:.28rem;}.z-h30{height:.3rem;} .z-h32{height:.32rem;}.z-h35{height:.35rem;} .z-h40{height:.4rem;}.z-h45{height:.45rem;} .z-h50{height:.5rem;}.z-h55{height:.55rem;} .z-h60{height:.6rem;}.z-h65{height:.65rem;} .z-h70{height:.7rem;}.z-h75{height:.75rem;} .z-h80{height:.8rem;}.z-h85{height:.85rem;} .z-h90{height:.9rem;}.z-h95{height:.95rem;} .z-h100{height:1rem;}.z-h110{height:1.1rem;} .z-h120{height:1.2rem;}.z-h130{height:1.3rem;} .z-h140{height:1.4rem;}.z-h150{height:1.5rem;} .z-h160{height:1.6rem;}.z-h170{height:1.7rem;} .z-h180{height:1.8rem;}.z-h190{height:1.9rem;} .z-h200{height:2rem;}.z-h300{height:3rem;} .z-h400{height:4rem;}.z-h500{height:5rem;} .zi-h0{height:0 !important;} ... .zi-h400{height:4rem !important;}.zi-h500{height:5rem !important;} .z-h5p{height:5%;}.z-h8p{height:8%;} .z-h10p{height:10%;}.z-h12p{height:12%;} .z-h15p{height:15%;}.z-h20p{height:20%;} .z-h30p{height:30%;}.z-h40p{height:40%;} .z-h50p{height:50%;}.z-h60p{height:60%;} .z-h70p{height:70%;}.z-h80p{height:80%;} .z-h90p{height:90%;}.z-h100p{height:100%;} .zi-h5p{height:5% !important;}.zi-h8p{height:8% !important;} ... .zi-h90p{height:90% !important;}.zi-h100p{height:100% !important;}

<#-- 行高 -->

行高

原 ZhiqimUI 中的定义具体数值的 z-lh*，如： z-lh15；统一改成用 z- 前缀，单位为 rem，如：z-lh15。
原 ZhiqimUI 中的定义百分比的 z-lh100p、zi-lh50p 保留。

.z-lh0{line-height:0;}.z-lh10{line-height:.1rem;} .z-lh12{line-height:.12rem;}.z-lh14{line-height:.14rem;} .z-lh15{line-height:.15rem;}.z-lh16{line-height:.16rem;} .z-lh18{line-height:.18rem;}.z-lh20{line-height:.2rem;} .z-lh22{line-height:.22rem;}.z-lh24{line-height:.24rem;} .z-lh25{line-height:.25rem;}.z-lh28{line-height:.28rem;} .z-lh30{line-height:.3rem;}.z-lh32{line-height:.32rem;} .z-lh35{line-height:.35rem;}.z-lh40{line-height:.4rem;} .z-lh45{line-height:.45rem;}.z-lh50{line-height:.5rem;} .z-lh55{line-height:.55rem;}.z-lh60{line-height:.6rem;} .z-lh70{line-height:.7rem;}.z-lh80{line-height:.8rem;} .z-lh90{line-height:.9rem;}.z-lh100{line-height:1rem;} .zi-lh0{line-height:0 !important;}.zi-lh10{line-height:.1rem !important;} ... .zi-lh90{line-height:.9rem !important;}.zi-lh100{line-height:1rem !important;} .z-lh100p{line-height:100%;}.z-lh110p{line-height:110%;} .z-lh120p{line-height:120%;}.z-lh130p{line-height:130%;} .z-lh140p{line-height:140%;}.z-lh150p{line-height:150%;} .z-lh180p{line-height:180%;}.z-lh200p{line-height:200%;} .z-lh250p{line-height:250%;}.z-lh300p{line-height:300%;} .zi-lh100p{line-height:100% !important;}.zi-lh110p{line-height:110% !important;} .zi-lh120p{line-height:120% !important;}.zi-lh130p{line-height:130% !important;} .zi-lh140p{line-height:140% !important;}.zi-lh150p{line-height:150% !important;} .zi-lh180p{line-height:180% !important;}.zi-lh200p{line-height:200% !important;} .zi-lh250p{line-height:250% !important;}.zi-lh300p{line-height:300% !important;}

<#-- 内边距和外边距 -->

内边距和外边距

原 ZhiqimUI 中的定义具体数值的 z-pd*、z-pd-l*、z-mg*、z-mg-r* ，如： z-pd5、z-pd-l5、z-mg10、z-mg-t-10；统一改成用 z- 前缀，单位为 rem。
新增 z-pd-lr*、z-pd-tb*、z-mg-lr*、z-mg-tb* 表示左右、上下的边距统一设置。
针对 1px 边框，可能存在的负偏移，新增 z-mg-t-1px 表示向上偏移 -1px；left、right、bottom方向同理。
外边距新增 auto属性。

.z-pd0{padding:0;}.z-pd1{padding:.01rem;} .z-pd2{padding:.02rem;}.z-pd3{padding:.03rem;} .z-pd4{padding:.04rem;}.z-pd5{padding:.05rem;} .z-pd6{padding:.06rem;}.z-pd7{padding:.07rem;} .z-pd8{padding:.08rem;}.z-pd9{padding:.09rem;} .z-pd10{padding:.1rem;}.z-pd12{padding:.12rem;} .z-pd14{padding:.14rem;}.z-pd15{padding:.15rem;} .z-pd16{padding:.16rem;}.z-pd18{padding:.18rem;} .z-pd20{padding:.2rem;}.z-pd24{padding:.24rem;} .z-pd25{padding:.25rem;}.z-pd26{padding:.25rem;} .z-pd28{padding:.28rem;}.z-pd30{padding:.3rem;} .zi-pd0{padding:0 !important;}.zi-pd1{padding:.01rem !important;} ... .zi-pd28{padding:.28rem !important;}.zi-pd30{padding:.3rem !important;} .z-pd-l0{padding-left:0;}.z-pd-l1{padding-left:.01rem;} .z-pd-l2{padding-left:.02rem;}.z-pd-l3{padding-left:.03rem;} .z-pd-l4{padding-left:.04rem;}.z-pd-l5{padding-left:.05rem;} .z-pd-l6{padding-left:.06rem;}.z-pd-l7{padding-left:.07rem;} .z-pd-l8{padding-left:.08rem;}.z-pd-l9{padding-left:.09rem;} .z-pd-l10{padding-left:.1rem;}.z-pd-l12{padding-left:.12rem;} .z-pd-l14{padding-left:.14rem;}.z-pd-l15{padding-left:.15rem;} .z-pd-l16{padding-left:.16rem;}.z-pd-l18{padding-left:.18rem;} .z-pd-l20{padding-left:.2rem;}.z-pd-l24{padding-left:.24rem;} .z-pd-l25{padding-left:.25rem;}.z-pd-l26{padding-left:.25rem;} .z-pd-l28{padding-left:.28rem;}.z-pd-l30{padding-left:.3rem;} .zi-pd-l0{padding-left:0 !important;}.zi-pd-l1{padding-left:.01rem !important;} ... .zi-pd-l28{padding-left:.28rem !important;}.zi-pd-l30{padding-left:.3rem !important;} ...为省略篇幅，类似代码省略... .z-pd-lr0{padding-left:0;padding-right:0;}.z-pd-lr1{padding-left:.01rem;padding-right:.01rem;} .z-pd-lr2{padding-left:.02rem;padding-right:.02rem;}.z-pd-lr3{padding-left:.03rem;padding-right:.03rem;} .z-pd-lr4{padding-left:.04rem;padding-right:.04rem;}.z-pd-lr5{padding-left:.05rem;padding-right:.05rem;} .z-pd-lr6{padding-left:.06rem;padding-right:.06rem;}.z-pd-lr7{padding-left:.07rem;padding-right:.07rem;} .z-pd-lr8{padding-left:.08rem;padding-right:.08rem;}.z-pd-lr9{padding-left:.09rem;padding-right:.09rem;} .z-pd-lr10{padding-left:.1rem;padding-right:.1rem;}.z-pd-lr12{padding-left:.12rem;padding-right:.12rem;} .z-pd-lr14{padding-left:.14rem;padding-right:.14rem;}.z-pd-lr15{padding-left:.15rem;padding-right:.15rem;} .z-pd-lr16{padding-left:.16rem;padding-right:.16rem;}.z-pd-lr18{padding-left:.18rem;padding-right:.18rem;} .z-pd-lr20{padding-left:.2rem;padding-right:.2rem;}.z-pd-lr24{padding-left:.24rem;padding-right:.24rem;} .z-pd-lr25{padding-left:.25rem;padding-right:.25rem;}.z-pd-lr26{padding-left:.25rem;padding-right:.25rem;} .z-pd-lr28{padding-left:.28rem;padding-right:.28rem;}.z-pd-lr30{padding-left:.3rem;padding-right:.3rem;} .zi-pd-lr0{padding-left:0 !important;padding-right:0 !important;}.zi-pd-lr1{padding-left:.01rem !important;padding-right:.01rem !important;} ... .zi-pd-lr28{padding-left:.28rem !important;padding-right:.28rem !important;}.zi-pd-lr30{padding-left:.3rem !important;padding-right:.3rem !important;} ...为省略篇幅，类似代码省略... .z-mg-0{margin:0;}.z-mg1{margin:.01rem;} .z-mg2{margin:.02rem;}.z-mg3{margin:.03rem;} .z-mg4{margin:.04rem;}.z-mg5{margin:.05rem;} .z-mg6{margin:.06rem;}.z-mg7{margin:.07rem;} .z-mg8{margin:.08rem;}.z-mg9{margin:.09rem;} .z-mg10{margin:.1rem;}.z-mg12{margin:.12rem;} .z-mg14{margin:.14rem;}.z-mg15{margin:.15rem;} .z-mg16{margin:.16rem;}.z-mg18{margin:.18rem;} .z-mg20{margin:.2rem;}.z-mg24{margin:.24rem;} .z-mg25{margin:.25rem;}.z-mg26{margin:.25rem;} .z-mg28{margin:.28rem;}.z-mg30{margin:.3rem;} .zi-mg0{margin:0 !important;}.zi-mg1{margin:.01rem !important;} ... .zi-mg28{margin:.28rem !important;}.zi-mg30{margin:.3rem !important;} .z-mg-t0{margin-top:0;}.z-mg-t1{margin-top:.01rem;} .z-mg-t2{margin-top:.02rem;}.z-mg-t3{margin-top:.03rem;} .z-mg-t4{margin-top:.04rem;}.z-mg-t5{margin-top:.05rem;} .z-mg-t6{margin-top:.06rem;}.z-mg-t7{margin-top:.07rem;} .z-mg-t8{margin-top:.08rem;}.z-mg-t9{margin-top:.09rem;} .z-mg-t10{margin-top:.1rem;}.z-mg-t12{margin-top:.12rem;} .z-mg-t14{margin-top:.14rem;}.z-mg-t15{margin-top:.15rem;} .z-mg-t16{margin-top:.16rem;}.z-mg-t18{margin-top:.18rem;} .z-mg-t20{margin-top:.2rem;}.z-mg-t24{margin-top:.24rem;} .z-mg-t25{margin-top:.25rem;}.z-mg-t26{margin-top:.25rem;} .z-mg-t28{margin-top:.28rem;}.z-mg-t30{margin-top:.3rem;} .zi-mg-t0{margin-top:0 !important;}.zi-mg-t1{margin-top:.01rem !important;} ... .zi-mg-t28{margin-top:.28rem !important;}.zi-mg-t30{margin-top:.3rem !important;} ...为省略篇幅，类似代码省略... .z-mg-t-1{margin-top:-.01rem;}.z-mg-t-2{margin-top:-.02rem;} .z-mg-t-3{margin-top:-.03rem;}.z-mg-t-4{margin-top:-.04rem;} .z-mg-t-5{margin-top:-.05rem;}.z-mg-t-6{margin-top:-.06rem;} .z-mg-t-7{margin-top:-.07rem;}.z-mg-t-8{margin-top:-.08rem;} .z-mg-t-9{margin-top:-.09rem;}.z-mg-t-10{margin-top:-.1rem;} .z-mg-t-12{margin-top:-.12rem;}.z-mg-t-14{margin-top:-.14rem;} .z-mg-t-15{margin-top:-.15rem;}.z-mg-t-16{margin-top:-.16rem;} .z-mg-t-18{margin-top:-.18rem;}.z-mg-t-20{margin-top:-.2rem;} .z-mg-t-24{margin-top:-.24rem;}.z-mg-t-25{margin-top:-.25rem;} .z-mg-t-26{margin-top:-.25rem;}.z-mg-t-28{margin-top:-.28rem;} .z-mg-t-30{margin-top:-.3rem;} .zi-mg-t-1{margin-top:-.01rem !important;}.zi-mg-t-2{margin-top:-.02rem !important;} ... .zi-mg-t-30{margin-top:-.3rem !important;} ...为省略篇幅，类似代码省略... .z-mg-t-1px{margin-top:-1px;} .z-mg-r-1px{margin-right:-1px;} .z-mg-l-1px{margin-left:-1px;} .z-mg-b-1px{margin-bottom:-1px;} .zi-mg-t-1px{margin-top:-1px !important;} .zi-mg-r-1px{margin-right:-1px !important;} .zi-mg-l-1px{margin-left:-1px !important;} .zi-mg-b-1px{margin-bottom:-1px !important;} .z-mg-auto{margin:auto;} .z-mg-l-auto{margin-left:auto;} .z-mg-r-auto{margin-right:auto;} .z-mg-t-auto{margin-top:auto;} .z-mg-b-auto{margin-bottom:auto;} .z-mg-lr-auto{margin-left:auto;margin-right:auto;} .z-mg-tb-auto{margin-top:auto;margin-bottom:auto;} .zi-mg-auto{margin:auto !important;} .zi-mg-l-auto{margin-left:auto !important;} .zi-mg-r-auto{margin-right:auto !important;} .zi-mg-t-auto{margin-top:auto !important;} .zi-mg-b-auto{margin-bottom:auto !important;} .zi-mg-lr-auto{margin-left:auto !important;margin-right:auto !important;} .zi-mg-tb-auto{margin-top:auto !important;margin-bottom:auto !important;}

${zhiqim_turorial_ZmUI_demo_start()}

ZhiqimUI.mobile

文案文案文案文案

这里是内容

${zhiqim_turorial_ZmUI_demo_end()}

${zhiqim_com_chapter()}