布局视口(layout viewport)

布局视口(layout viewport)

• layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。

      /* 创建多个媒体查询 */
          /* 当屏幕小于1200px */
          @media screen and (max-width:1200px) {
              .container {
                  width: 970px;
              }
  
              .container .content {
                  width: 200px;
              }
          }
  
          /* 当屏幕小于992 */
          @media screen and (max-width:992px) {
              .container {
                  width: 750px;
              }
  
              .container .content {
                  width: 175px;
              }
          }
  
          /* 当屏幕小于768px */
          @media screen and (max-width:768px) {
              .container {
                  width: 100%;
                  /* display: flex; */
                  flex-wrap: wrap;
              }
  
              .container .content {
                  width: 100%;
              }
          }

* {
    margin: 0px;
    padding: 0px;
}


@media screen and (min-width:375px) {
    /*  */
    html {
        font-size: 37.5px;
    }
}

@media screen and (min-width:393px) {
    html {
        font-size: 39.3px;
    }
}

@media screen and (min-width:414px) {

    html {
        font-size: 41.4px;
    }
}

@media screen and (min-width:768px) {
    html {
        font-size: 76.8px;
    }
}

@media screen and (min-width:820px) {

    html {
        font-size: 82px;
    }
}