css使用rem自适应

最新推荐文章于 2023-07-19 14:51:02 发布

吃痴鱼

最新推荐文章于 2023-07-19 14:51:02 发布

阅读量1.2k

点赞数

分类专栏： css3 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_52685664/article/details/126587483

版权

css3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css设置html的fontsize

html {
  font-size: 1/19.2vw // 0.052083333333333336vw;;
}

在页面的元素全都按照设计图px写rem

.container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% - 32rem);
    height: calc(100% - 32rem);
    margin: auto;
    // padding: 0 16rem;
    .lefWrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 410rem;
      height: 100%;
    }
    .centerWrap {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      // position: relative;
      // width: 54%;
      max-width: calc(100% - 820rem);
      height: 100%;
      // margin: auto;
      padding: 0 16rem;
      /*  .boerddd {
        width: 13rem;
        height: 13rem;
        background: radial-gradient(rgba(97, 142, 255, 0.3) 25%, rgba(97, 142, 255, 0.6) 75%);
        // background-color: rgba(97, 142, 255, 0.6);
        border: solid 1rem rgba(97, 142, 255, 1);
        transform: rotate(45deg);
      } */
    }
    .rightWrap {
      // padding-bottom: 14rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 410rem;
      height: 100%;
    }
  }