样式

刀刀

12/31/2024

0 字

0 分钟

项目中样式文件总共分为几类：

初始化基准样式
公共组件样式
第三方组件库调整样式
......

下面分别对他们的封装做粗略的谈论。

基准样式

顾名思义，就是在项目最开始初始化时处理的样式，一般都是把 HTML 标签的默认样式（如内外边距、边框等）清除；媒体查询设置元素的响应式宽高；字体样式的引入；或者定义一些公共类名样式等。例如：

清除样式

css

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
        sans-serif, 'FZLTZHJW--GB1-0';
    vertical-align: baseline;
    box-sizing: border-box;
}

媒体查询样式

css

@media screen and (max-width: 1441px) {
    html {
        font-size: 66px;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1921px) {
    html {
        font-size: 75px;
    }
}

公共类名样式

css

.scroll {
    ::-webkit-scrollbar {
        /* 滚动条整体样式 */
        width: 4px;
        /* 高宽分别对应横竖滚动条的尺寸 */
        height: 1px;
    }

    ::-webkit-scrollbar-thumb {
        /* 滚动条里面小方块 */
        border-radius: 4px;
        background: #214495c7;
        background-clip: content-box;
        border: 0px solid transparent;
    }

    ::-webkit-scrollbar-track {
        /* 滚动条里面轨道 */
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        background: rgba(181, 183, 189, 0.831);
    }
}

/* 除了设置show-scroll的盒子，其他盒子都不显示滚动条 */
*:not(.show-scroll, .show-scroll > *)::-webkit-scrollbar {
    //chrome 和Safari，电脑端微信浏览器
    width: 0 !important;
    height: 0 !important;
}

字体样式设置
css
```
@font-face {
    font-family: 'black';
    src: url('../fonts/black.ttf');
}
```
后续在项目中都可以通过 font-family: block; 设置字体样式。
注意
为了避免中文问题，字体设置尽可能使用英文，在项目中最开始使用了中文，导致本地环境没问题，打包部署后字体失效，出现问题。
引入其他样式文件
最后引入其他设置的样式文件，如下文中的第三方组件库样式和公共组件样式等。

第三方组件库样式

本项目采用的是第三方组件库 element-ui ，为了适配 UI 设计规范，因此需要对组件的边框、背景色等做一系列的处理，如下所示：

less

@fontColor: #EFFFFF;
@borderRadius: 2px;
@background: linear-gradient(-66.16deg, rgba(34, 120, 105, 0.58) 8.087%,rgba(15, 103, 74, 0.62) 93.804%);

.bordered {
    border-right: 1.5px solid;
    border-image: linear-gradient(180deg, #379084 0%, #5cf4c3 99%) 1.5 1.5 1.5 1.5;
}

.el-input__inner {
    background: @background;
    border-radius: @borderRadius;
    font-size: 14px;
    color: @fontColor;

    &::placeholder {
        font-size: 12px;
    }

    .bordered();
}

设置了样式变量后在需要调整的类名上引用即可。

公共组件样式

公共组件样式根据每个组件的不同设置对应的样式，不做过多赘述。

样式 ​

基准样式 ​

第三方组件库样式 ​

公共组件样式 ​

样式

基准样式

第三方组件库样式

公共组件样式