小程序全局样式(app.wxss 源码分享)

最新推荐文章于 2024-07-26 13:09:24 发布

黄河爱浪

最新推荐文章于 2024-07-26 13:09:24 发布

阅读量3.7k

点赞数 1

分类专栏：小程序文章标签：微信小程序 app.wxss 全局样式

本文链接：https://blog.csdn.net/u013350495/article/details/93141910

版权

小程序专栏收录该内容

15 篇文章 0 订阅

订阅专栏

小程序拥有丰富的组件，当下专为小程序设计的UI框架也不多。小编个人觉得做小程序，UI框架用和不用没什么区别，使用好官方的组件足够了。但拥有一款优秀的全局样式表，助你绕坑和提升效率岂不美哉？

源码是小编个人原创，弹性盒子布局是集项目中使用率最高的布局场景之一，好好利用能使您布局的效率大大提高。

布局盒子在线演示地址：http://www.jq22.com/jquery-info19340，更多信息请查看样式文件源码，有详细注释！

app.wxss

/**
 * 小程序弹性布局盒子
 * 作者：helang
 * 邮箱：helang.love@qq.com
 * ＱＱ：1846492969
**/

/* 根元素样式 设置页面背景、字体大小、字体颜色，字符间距、长单词换行 */
page {
  background-color: #f3f3f3;
  font-size: 28rpx;
  box-sizing: border-box;
  color: #333;
  letter-spacing: 0;
  word-wrap: break-word;
}
/* 设置常用元素尺寸规则 */
page,view,textarea,input,label,form,button{box-sizing: border-box;}
/* 按钮样式处理 */
button{font-size: 28rpx;}
/* 取消按钮默认的阴影效果 */
button::after{border:none;}
/* 设置图片默认样式，取消默认尺寸 */
image{display: block;height: auto;width: auto;}

/* 列式弹性盒子 */
.flex_col {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
/* 行式弹性盒子 */
.flex_row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

/* 弹性盒子弹性容器 */
.flex_col .flex_grow{width:0;flex-grow: 1;}
.flex_row .flex_grow{flex-grow: 1;}

/* 弹性盒子允许换行 */
.flex_col.flex_wrap{flex-wrap: wrap;}

/* 弹性盒子居中对齐 */
.flex_col.flex_center,.flex_row.flex_center{justify-content: center;}

/* 列式弹性盒子两端对齐 */
.flex_col.flex_space{justify-content: space-between;}

/* 弹性盒子快速分栏 */
.flex_col.flex_col_2>view{width: 50%;}
.flex_col.flex_col_3>view{width: 33.33333%;}
.flex_col.flex_col_4>view{width: 25%;}
.flex_col.flex_col_5>view{width: 20%;}
.flex_col.flex_col_6>view{width: 16.66666%;}

/* 字体颜色 */
.color_333 {color: #333;}
.color_666 {color: #666;}
.color_999 {color: #999;}
.color_fff {color: #fff;}
.color_6dc{color: #6dca6d;}
.color_d51{color: #d51917;}
.color_09f{color: #0099ff;}

/* 背景色*/
.bg_fff{background-color: #ffffff;}

/* 字体大小 */
.size_10 {font-size: 20rpx;}
.size_12 {font-size: 24rpx;}
.size_14 {font-size: 28rpx;}
.size_16 {font-size: 32rpx;}
.size_18 {font-size: 36rpx;}
.size_20 {font-size: 40rpx;}

/* 字体加粗 */
.font_b{font-weight: bold;}

/* 对齐方式 */
.align_c{text-align: center;}
.align_l{text-align: left;}
.align_r{text-align: right;}

/* 遮罩 */
.shade{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.8);
  z-index: 10;
}

/* 弹窗 */
.shade_box{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 11;
  min-width: 200rpx;
  min-height: 200rpx;
}