今天新建了个vue项目，想弄一个顶部铺满屏幕的图片，结果发现无论怎么调，都无法完全铺满屏幕。

image

排查思路如下：

1.检查视口viewport

检查index.html的头部是否正确设置了视口，使内容展示自适应屏幕的大小。

我的配置：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">

这里没有问题。

2.检查element-ui引入

我的配置

import ElementUIfrom 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI

这里我一度怀疑是element-ui的默认样式导致的问题，看了半天我引入的css文件，没能找到问题。

3. 找到问题-index.html自带样式

后来经过多方查找，原来是index.html的body自带样式，在该文件的头部写如下自定义样式。

    <style>
      body{
        margin:0;
        padding:0;
      }
    </style>

问题解决：

image.png