PC端、移動端、平闆的适應CSS寫法

多套CSS

1. 1200px 或以上被視爲筆記本電腦和台式機(jī)尺寸。

2. 768px 到 1024px 被認爲是平闆尺寸。

3. 767px 或以下被視爲移動設備尺寸。

/* 當頁面寬度大(dà)于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;

            }

}//移動端

//移動端最後三個都(dōu)是可(kě)以的，主要看(kàn)你(nǐ)自(zì)己怎麽寫

css使用rem自(zì)适應

css設置html的fontsize 

html{

font-size:1/19.2vw//0.052083333333333336vw;;

}

在頁面的元素全都(dōu)按照(zhào)設計(jì)圖px寫rem 如(rú)下

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

    }

}