微信小程序WXSS-小样儿960

---

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 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;
}