ウィーチャットウィジェットWXSS-サンプル960
3518 ワード
WXSS
WXSS(WeiXin Style Sheets)は、WXMLのコンポーネントスタイルを記述するためのスタイル言語です.WXSSはCSSの大部分の特性を持っている.
CSSと比較して、WXSS拡張の特性は以下の通りである.
寸法単位
rpx(responsive pixel):画面幅に応じて適応できます.規定画面幅は750 rpx.iPhone 6で画面幅が375 pxで750個の物理画素がある場合、750 rpx=375 px=750物理画素、1 rpx=0.5 px=1物理画素となる.
デバイス
rpx換算px(画面幅/750)
px換算rpx(750/画面幅)
iPhone5
1rpx = 0.42px
1px = 2.34rpx
iPhone6
1rpx = 0.5px
1px = 2rpx
iPhone6 Plus
1rpx = 0.552px
1px = 1.81rpx
スタイルのインポート
@import "common.wxss";
app.wxss汎用
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
font-family: ' '
}
.df{
display: flex;
}
.df_1{
flex: 1;
-webkit-tap-highlight-color: transparent;
}
.df_2{
flex: 2;
-webkit-tap-highlight-color: transparent;
}
.bg{ background: #fff;}
.bg_black{ background: #000;}
.bg_gary{ background: #eee;}
.bg_red{ background: #dd2727;}
.bg_green{ background: #02bf02;}
.bg_orange{ background: #f85;}
.clear{ clear: both;}
.ovh1{
width:100%;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
}
.red{ color: #dd2727;}
.c3{ color: #333;}
.c6{ color: #666;}
.c9{ color: #999;}
.white{ color: #fff;}
.font_32{ font-size: 32rpx;}
.font_26{ font-size: 26rpx;}
.font_24{ font-size: 24rpx;}
.font_20{ font-size: 20rpx;}
.l_h40{
line-height: 40rpx;
}
/* */
.pr{position: relative;}
.pa{position: absolute;}
/* */
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
/* */
.tl{text-align: left;}
.tc{text-align: center;}
.tr{text-align: right;}
/* */
.mt1{margin-top: 1px;}
.mt5{margin-top: 5px;}
.mt8{margin-top: 8px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.p_all{ padding: 3%;}
/* */
.bte{border-top:solid 1px #eee;}
.bbe{border-bottom: solid 1px #eee;}
.bre{ border-right: 1px solid #eee}
/* */
.fl_l{ float: left;}
.fl_r{ float: right;}
.w10{ width: 10%;}
.w20{ width: 20%;}
.w30{ width: 30%;}
.w40{ width: 40%;}
.w50{ width: 50%;}
.w60{ width: 60%;}
.w70{ width: 70%;}
.w80{ width: 80%;}
.w90{ width: 90%;}
.w100{ width: 100%;}
/* */
.bte{ border-top: 1px solid #eee;}
.bbe{ border-bottom: solid 1px #eee;}
.bre{ border-right: 1px solid #eee;}
.ble{ border-left: 1px solid #eee;}
.footfixed {
display: block;
position: fixed;
bottom: 0;
left: 0;
background: #fff;
z-index: 100;
width:100%;
font-size: 28rpx;
border-top: 1px solid #eee;
line-height: 50px;
}
.cl_h{
clear: both;
height: 1px;
margin-top: 60px;
}
.shop{ position: relative;}
.video{
width: 45px;
height: 45px;
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.video image{
width: 45px;
height: 45px;
background-size:45px;
}
.search_no{
width: 100%;
display: block;
color: #666;
text-align: center;
font-size: 28rpx;
}
.scimg{
width: 100px;
height: 100px;
display: inline-block;
background-size:100px;
}
.x_right{
width: 16px;
height: 18px;
margin-left: 10px;
}
button[type="warn"] {
color:#FFFFFF;
background-color:#d9002f;
}