《前端》解决背景适配不同屏幕大小，如何解决因屏幕大小的不同而导致背景的放大或缩小。

目录

一、问题描述：

1.多了一段滚动距离

​2.换大屏时背景就变小了

 二、需要了解知识

三、解决：

1.HTML上：

2.css上：

四、效果：

---

一、问题描述：

       最近小编在编程时遇到一个问题，放了一张背景图，在笔记本（15.6寸）上看的是铺满屏，但是换了24寸或27寸屏幕再看效果时，就发现了下面两张图片的问题：

1.多了一段滚动距离

2.换大屏时背景就变小了： 

 

 二、需要了解知识

 那就是“vh”和“vw”；

• vw单位可以根据窗口的宽度自动改变大小，1vw是窗口宽度的1%；

• vh单位可以根据窗口的高度自动改变大小，1vh是窗口高度的1%；

刚学习CSS和HMTL大多师兄只会的单位应该就是“%”和“px”；

但是在实际开发中，知道这两个远远不够，比如今天的问题，我们就需要“vh”和“vw”来解决

三、解决：

1.HTML上：

src可以引用一张自己的图片

<div id="Max_box">
        <img src="The Game Map.jpg" alt="" width="100%" height="100%">
    </div>

2.css上：

#Max_box {
    width: 100%;
    height: 100vh;
}

这样就能在不同屏幕大小的情况不会出现产生一段滚动条或者缩小了

这次小编只用了vh，因为它已经足够解决目前的问题了，

当然日后需要各位师兄灵活转换，vh和vw同时使用还是单个使用

四、效果：

 问题得到了解决，无论是多少寸的屏幕，背景图都是铺满整个窗口

如果文章有不足欢迎指责，也欢迎各位师兄指导