目录
1. CSS 样式重置(normalize.css)
安装 normalize.css
npm install normalize.css --save
创建 base.css 设置 html font-size (用于 rem)
src/style/base.scss
html {
font-size: 100px;
}
body {
font-size: 0.12rem
}
main.js 引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
import './style/base.css'
createApp(App).use(store).use(router).mount('#app')
在不同设备,样式等比例适配 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>
var width = document.documentElement.clientWidth || document.body.clientWidth;
var ratio = width / 375;
var fontSize = 100 * ratio;
document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
2. 合并 CSS 文件
// index.scss(css 文件入口)
@import './base.scss';
@import './iconfont/iconfont.css';
// main.js
import './style/index.scss'
3. CSS 使用 BEM 命名规则
Bem是块(block)、元素(element)、修饰符(modifier)的简写
-
中划线:仅作为连字符使用--
双中划线:表示不同状态或不同版本__
双下划线:双下划线用来连接块和块的子元素
<div class="docker">
<div class="docker__item docker__item--active">
<div class="iconfont"></div>
首页
</div>
<div class="docker__item">
<div class="iconfont"></div>
购物车
</div>
<div class="docker__item">
<div class="iconfont"></div>
订单
</div>
<div class="docker__item">
<div class="iconfont"></div>
我的
</div>
</div>
<style lang="scss" scoped>
@import '../../style/viriables.scss';
.docker {
display: flex;
box-sizing: border-box;
position: absolute;
padding: 0 .18rem;
left: 0;
bottom: 0;
width: 100%;
height: .49rem;
border-top: .01rem solid $content-bgColor;
color: $content-fontcolor;
&__item {
flex: 1;
text-align: center;
.iconfont {
margin: .07rem 0 .02rem 0;
font-size: .18rem;
}
&--active {
color: #1FA4FC;
}
}
&__title {
font-size: .2rem;
transform: scale(.5, .5);
transform-origin: center top;
}
}
</style>
// viriables.scss
$content-fontcolor: #333;
$content-bgColor: #F1F1F1;
4. 定义变量 viriables.scss
// viriables.scss
$dark-fontColor: #000;
$content-fontcolor: #333;
// 使用
<style lang="scss" scoped>
@import '../../style/viriables.scss';
.nearby {
&__title {
margin: .16rem 0 .02rem 0;
font-size: .18rem;
font-weight: normal;
color: $content-fontcolor;
}
a {
text-decoration: none;
}
}
</style>
5. 提取公共样式 mixins.scss
// mixins.scss
@mixin ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
// 使用
<style lang="scss" scoped>
@import '../../style/mixins.scss';
.position {
position: relative;
padding: .16rem .24rem .16rem 0;
line-height: .22rem;
font-size: .16rem;
@include ellipsis;
}