前端首页自适应

假设：
设计ui的图——宽度w1：1920px，高度为h1：1080px，其比例i1：16/9
浏览器页面——宽度w2，高度为h2，浏览器显示窗口比例为i2
实际前端页面——宽度w3，高度为h3，
当浏览器窗口比例 i2>16/9的时候就是太宽了 ，那么就有游览器就有上下滚动条，且w3等于w2，h3超出隐藏
当浏览器窗口比例 i2<16/9的时候就是太窄了 ，那么就有游览器就有左右滚动条；且h3等于h2，w3超出隐藏

/*这里设计图是1920px*1080px
后面的px都用rem代替，
比如画一个宽度为100px的就可以写 1rem
*/
html {
  font-size: calc(100vw / 19.2);
  width: 100%;
  height: 10.8rem;
}

@media screen and (max-width: calc(100vh*16/9)) {
  /* 在视口宽度介于768px和1024px之间时应用的样式 */
  html {
    font-size: calc(100vh / 10.8);
    width: 19.2rem;
    overflow-x: scroll;
    overflow-y: hidden;
  } 
}

如果有帮助点赞收藏