PC端、移动端、平板的适应CSS写法

多套CSS

1. 1200px 或以上被视为笔记本电脑和台式机尺寸。

2. 768px 到 1024px 被认为是平板尺寸。

3. 767px 或以下被视为移动设备尺寸。

/* 当页面宽度大于767px小于1024px */

PC端

            body{

                background:yellow;

            }

 @media screen and (min-width:767px) and (max-width:1024px){

            body{

                background:yellow;

            }

   }//平板

@media screen and (max-width:767px) {

            body{

                background:yellow;

            }

}//移动端

@media screen and (max-width:750px) {

            body{

                background:yellow;

            }

}//移动端

@media screen and (max-width:480px) {

            body{

                background:yellow;

            }

}//移动端

//移动端最后三个都是可以的，主要看你自己怎么写

css使用rem自适应

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%;

    }

}