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

    }

}