前端开发常见全局css 基础配置
目录 global.less
@import "./variable";
* {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-touch-callout: none;
touch-callout: none;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
box-sizing: border-box;
}
/** 引入新字体 BebasNeue */
@font-face {
font-family: "BebasNeue";
src: url('./assets/font/BebasNeue-Regular.ttf');
}
@font-face {
font-family: "YouSheBiaoTiHei";
src: url("./assets/font/compressFont/YouSheBiaoTiHei.ttf");
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style: normal;
font-weight: normal;
}
html {
font-size: 62.5%;
font-size: calc(100vw/3.75); // 设计稿宽度 计算
font-size: -webket-calc(100vw/3.75);
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
ol,
ul,
dl,
dd,
p,
textarea,
input,
select,
option,
form,
button {
margin: 0;
padding: 0;
}
input {
border: none;
}
body {
-webkit-tap-highlight-color: transparent;
font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
font-size: @normalFontSize;
font-weight: @normalFontWeight;
color: @normalFontColor;
-webkit-font-smoothing: antialiased;
}
html,
body,
#root {
height: 100vh;
background: #fbfbfb;
}
ol,
ul,
textarea,
input,
option,
th,
td {
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
// font-size:100%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
//.clearfix {*zoom:1;}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
input[type=text],
textarea {
-webkit-appearance: none;
}
input:focus {
-webkit-user-modify: read-write-plaintext-only;
}
fieldset,
img {
border: 0;
}
img {
display: inline-block;
width: 100%;
max-width: 100%;
}
a {
text-decoration: none;
word-wrap: break-word;
}
a,
textarea,
input,
button {
outline: none;
}
button {
box-sizing: border-box;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
textarea {
overflow: auto;
resize: none;
}
a{
line-break:anywhere !important;
}
// author：林钰朝
// 功能: 全局可使用的通用样式
.flexBetween {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.selectNone {
user-select: none;
}
.alignCenter {
text-align: center;
}
.trunc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oneLineScroll {
overflow: hidden;
overflow-x: scroll;
white-space: nowrap;
}
// variable.less
@black: black;
@white: white;
//主题色
@themeColor: rgba(132, 116, 244, 1);
//字体颜色
@normalFontColor: #333B50;
@lightFontColor: #999999;
//字体大小
@smallFontSize: .14rem;
@normalFontSize: .16rem;
@largeFontSize: .18rem;
//字体大小
@normalFontWeight: 400;
@mediumFontWeight: 500;
@boldFontWeight: 700;
//分割线颜色
@lineColor: rgba(0, 0, 0, 0.05);
// 答题卡可切换tab的样式
@tabsStyle: {
width: .8rem;
height: .3rem;
border: 1px solid #999;
border-radius: .06rem;
color: #999;
}
@inputBgColor: linear-gradient(to right, #F9F9FA, #F9F9FA, #F9F9FA);
//字体基本样式
@fontStyle: {
color: @normalFontColor;
font-weight: @normalFontWeight;
font-size: @normalFontSize;
}
;
@fontFamily: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
@activityFontStyle: {
font-family: YouSheBiaoTiHei;
font-size: 0.23rem;
color: rgba(224,55,85,1);
line-height: 0.31rem;
text-shadow: 0 0.01rem 0.02rem 0px 1px 2px rgba(0,0,0,0.1);
-webkit-text-stroke: 0.01rem rgba(255, 255, 255, 1);
text-stroke: 0.01rem rgba(255, 255, 255, 1);
}
/** 循环转动动画 */
@cyclicRotate: {
-webkit-animation: cyclicRotate 600ms linear infinite;
-moz-animation: cyclicRotate 600ms linear infinite;
-o-animation: cyclicRotate 600ms linear infinite;
animation: cyclicRotate 600ms linear infinite;
@-webkit-keyframes cyclicRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-moz-keyframes cyclicRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-o-keyframes cyclicRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes cyclicRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
/** 水印 */
@waterMark : {
background-image:
url("./assets/watermark_icon@3x.png"),
url("./assets/watermark_icon@3x.png"),
url("./assets/watermark_icon@3x.png"),
url("./assets/watermark_icon@3x.png"),
url("./assets/watermark_icon@3x.png"),
url("./assets/watermark_icon@3x.png");
background-size: 1.35rem 0.55rem;
background-repeat: no-repeat;
background-position:
2% 2%,
45% 18%,
95% 34%,
60% 65%,
5% 90%,
95% 98%;
}
//独家试卷跟出版物水印
@waterMarkPublish : {
background-image:
url("./assets/shuiyin_icon@3x.png"),
url("./assets/shuiyin_icon@3x.png"),
url("./assets/shuiyin_icon@3x.png"),
url("./assets/shuiyin_icon@3x.png"),
url("./assets/shuiyin_icon@3x.png"),
url("./assets/shuiyin_icon@3x.png");
background-size: 1.35rem 0.55rem;
background-repeat: no-repeat;
background-position:
2% 2%,
45% 18%,
95% 34%,
60% 65%,
5% 90%,
95% 98%;
}
// 重置富文本样式
@richTextStyleReSet : {
div,
p,
span,
table,
i {
margin: 0 !important;
background: transparent !important;
font-size: 0.16rem !important;
font-family: PingFang-SC-Regular !important;
color: rgba(114, 119, 126, 1) !important;
line-height: 0.24rem;
}
p {
text-align: left !important;
}
}
// 范文富文本样式重置
@modelEssayStyleReSet : {
div,
p,
span,
table,
i {
font-size: 0.16rem !important;
font-family: PingFang-SC !important;
color: #333B50 !important;
line-height: 0.24rem;
}
p {
text-align: left !important;
}
}
// 富文本字体颜色设置
@richTextSelectFontColor : {
div,
p,
span,
table,
i {
color: #333B50 !important;
}
}
@richTextColor: {
div,
p,
span,
table,
i {
font-color: #363D51 !important;
}
}
//滚动条样式
@scrollBarStyle: {
//滚动条
&::-webkit-scrollbar {
width: 5px;
}
//轨道
&::-webkit-scrollbar-track {
border-radius: 5px;
}
//滑块
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(51, 119, 255, .3);
}
}
shimuqiao
浙公网安备 33010602011771号