屏幕自适应

从事前端开发的工作者都知道，一个网页的宽高通常都是固定的。而如果我们设置了固定的宽高，当屏幕大小发生变化或者用户设备的显示器大小与开发者的设备显示器不一时，用户则需要滑动上下左右滚动条才能浏览整个网页。而如果我们设置宽高为100%同时又设置了背景图或者背景颜色，那么只有浏览器窗口大小就决定了背景图或者背景颜色的填充大小，而网页的超出部分将会默认为白色就会显得非常难看。

如下图：

正常显示效果图

当浏览器窗口调小时的效果图

如果出现上述情况时，我们只要在css文件中添加自适应即可。代码如下：

@media screen and (max-width:1101px ) {

 /*当浏览器窗口最大宽度是1101px时（也就是说只有浏览器窗口小于1101个像素时），body标签的宽度为1101px,如果浏览器窗口宽度大于1101个像素，body标签的宽度为100%即继承浏览器窗口的宽度。*/
body{
width: 1101px;
} 
}