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 はブロック、エレメント、修飾子の略です。

- ダッシュ: ハイフンとしてのみ使用

-- 二重ダッシュ: 異なる状態または異なるバージョンを示します

__ 二重下線: ブロックとブロックのサブ要素を接続するために二重下線が使用されます

<div class="docker">
    <div class="docker__item docker__item--active">
      <div class="iconfont">&#xe6cb;</div>
      首页
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe73d;</div>
      购物车
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe713;</div>
      订单
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe659;</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;
}

開発プロジェクトの考慮事項 - CSS

1. CSS スタイルのリセット (normalize.css)

2.CSSファイルを結合する

3. CSS は BEM 命名規則を使用します

4. 変数 viriables.scss を定義します

5. 一般的なスタイルの mixins.scss を抽出します

おすすめ