微信小程序公共样式

最新推荐文章于 2024-09-24 15:41:24 发布

挚友阳光

最新推荐文章于 2024-09-24 15:41:24 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 css css3

本文链接：https://blog.csdn.net/qq_41366114/article/details/121301914

微信小程序专栏收录该内容

27 篇文章

订阅专栏

本文探讨了如何在微信小程序中有效地管理公共样式，包括使用CSS预处理器、原子类和样式模块化的方法，旨在提升代码复用和界面一致性。

/* create 2021-10-30 author lin*/

page{
    font-family: PingFang SC;
}

/* flex布局 */
.dis-flex {
    display: flex;
}

.flex-box {
    flex: 1;
}

.flex-x-center {
    justify-content: center;
}

.flex-x-between {
    justify-content: space-between;
}

.flex-x-around {
    justify-content: space-around;
}

.flex-x-end {
    justify-content: flex-end;
}

.flex-y-center {
    align-items: center;
}

.flex-y-end {
    align-items: flex-end;
}
.flex-wrap{
    flex-wrap: wrap;
}
/* 文字溢出隐藏 */
.onelist-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
}

.twolist-hidden {
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.threelist-hidden {
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/* 图片填充 */
.fill-img-wh image{
    width: 100%;
    height: 100%;
}
.fill-img-w image{
    width: 100%;
}
/* 背景图裁剪 */
.bg-center {
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* --------end-------- */


/* 无样式button (用于伪submit) */
.btn-normal {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
    background: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    font-size: unset;
    text-align: unset;
    overflow: visible;
    color: inherit;
}

.btn-normal:after {
    border: none;
}

.btn-normal.button-hover {
    color: inherit;
}

/* 默认样式取消 */
button::after {
    border: none;
}

input {
    outline: none;
    border: none;
    list-style: none;
}
/* 刘海 底部条形返回 安全距离 */
.safety-box{
    padding-bottom: env(safe-area-inset-bottom);
}