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

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


.Wh9Hj
1 声望0 粉丝