ウィーチャットウィジェット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;
    }