自定义变量--px --笔记

自定义变量

//home.vue 使用自定义变量 和 calc计算属性
<style lang="scss" scoped>
.Home {
  height: 100%;
  width: 100%;
  .homePage {
    height: calc(100% - calc(70 * var(--px)));
    width: 100%;
    .pageBox,
    .pageBoxHide {
      height: calc(100% - calc(70 * var(--px)));
      width: calc(100% - calc(250 * var(--px)));
      position: absolute;
      left: calc(250 * var(--px));
      background-color: #f0f0f0;
      transition: left .3s ease-in-out;
      .page {
        height: calc(100% - calc(30 * var(--px)));
      }
    }
    .pageBoxHide {
      left: calc(30 * var(--px));
      width: calc(100% - calc(30 * var(--px)));
    }
  }
}
</style>

//index.html   
<style>
  * {
    padding: 0;
    margin: 0;
  }

  html {
    height: 100%;
    width: 100%;
  }

  body {
    height: 100%;
    width: 100%;
    font-family: Helvetica, "Microsoft YaHei", sans-serif;
  }

  a {
    text-decoration: none;
  }

  input {
    background-color: rgba(237, 237, 237, 0);
  }

  input:focus {
    outline: 0;
    color: #bebebe;
  }
  button {
    outline: none;
    border: 0;
    cursor: pointer;
  }
  //自定义初始变量--px
  :root {
    --px: 1px;
  }
  //通过media检查针对不同的媒体类型定义不同的样式，如下在屏幕宽度不超过1440时，自定义--px时0.75px
  @media all and (max-width: 1440px) {
    :root {
      --px: 0.75px;
    }
  }
  //important ，声明重要性，会损害原始的访问优先级，应尽量避免使用
  .__view {
    height: 100% !important;
    width: 100% !important;
  }
</style>