vue中怎么把背景铺满全屏

Posted 2021-09-15 .Wh9Hj

这种能铺满全屏（无留白），但是宽高比会改变，图片会有一定扭曲

template>div.app

.app{
    bg:url(xxx)
    height:100%
    width:100%
    position:fixed
}

app.vue 设置body

body{
    margin:0;
    padding:0
}

工具实现

这种情况在苹果上显示比较好，但是在大屏（pad）上会有留白~~~~

样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具:

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

• lib-flexible 用于设置 rem 基准值

  使用手机的宽高数据
  .app {
  width: 375px;
  height: 667px;
  background: url("../../../static/img/1-1.jpg");
  background-size: 100% 100%;
  position: fixed;
  }