<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>背景图片自适应</title><style type="text/css">html,body {padding: 0margin: 0}div {width: 100%height: 300pxbackground: url('images/slide_01_640x340.jpg') no-repeatbackground-size: 100% 100%}</style></head><body><div></div></body></html>
2.HTML代码的截图效果：
3.自适应最重要的样式如下：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
width: 100%
background-size: 100% 100%
4.最终的效果是这样：
前言：我们在开发的时候，后台有时候会给我们Html的文本，和图片，但Html一般是电脑端的，放在手机端图片会特别大，所以我们要进行一些适配
先看一下效果
这里因为要用到图片查看器，所以加上以下依赖 ，支持手势双击，单机
以上是借用的这两篇文章
https://blog.csdn.net/smileiam/article/details/72123227
https://www.jb51.net/article/130645.htm
HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果。自适应屏幕的宽度，利用css中background属性可以实现
工具/材料浏览器，文本编辑器
01新建一个HTML文件，代码如下图
02打开HTML文件所在的文件夹，双击文件，跳转到浏览器
03改变浏览器大小，发现图片没有变化，显示不全
04在所在文件夹下，新建一个样式文件，命名为 auto.css，代码如下
05在HTML文件中加上对样式文件的引用，返回文件夹，双击HTML文件，发现浏览器的变化会引着图片一起变化，自适应屏幕的大小
