图片自适应屏幕大小显示主要是利用百分比来控制，切忌给图片宽度一个固定值。如下代码：html代码:
这样，图片的大小就会根据其父级容器的大小而变化，图片的宽度只设置百分比，这样可以根据浏览器窗口的大小变化而随时调整。
要让网页在浏览器自适应屏幕大小，可以使用响应式设计和CSS媒体查询。通过设置 viewport 的宽度为设备宽度，并使用百分比、vw、vh 等相对单位来定义页面元素的尺寸，使其根据屏幕大小自动调整。
此外，使用 CSS 媒体查询可以根据不同屏幕尺寸应用不同的 CSS 样式，以提供更好的用户体验。设置最大宽度和最小宽度，以使网页在各种设备上都能适应。
还可以使用流式布局或弹性布局，使网页元素根据屏幕大小动态调整，并确保内容在小屏幕上可读性良好。最后，测试和调试网页在不同设备和屏幕大小下的显示效果，进行必要的优化和调整。
2.将建好的静态页命名为css.html，标题为了“css如何设置图片大小自适应”
3.在body中添加两个div，设置不能的宽度，并设class 为div1和div2，目的是用一样的css控制图片的宽度在不同的宽度容器中都能很好的显示
4.在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式
5.在两个div中加入相同的图片，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了
6.这个时候我们需要在img 类中加入限制图片的宽度的css语句让他自己适应容器的宽度.img img{ width:100%; height:auto}
echarts图表自适应屏幕大小，根据屏幕大小图表大小也随之改变。
在实际的应用中一个页面可能会有好几个Echarts图表，而使用window.onresize = option.chart.resize(),加载页面图表后，页面上只有一个图表会根据浏览器的变化而自适应。如果要是页面上的图表都要自适应。则需要将resize事件叠加在不同的图上面。
如果一个页面有一个图表：myChart.setOption(option,window.onresize = myChart.resize)；
如果一个页面有多个图表（此处举例3个）：
;company.setOption(companys);在最后加上如下代码//图表根据窗口大小自适应setTimeout(function (){window.onresize = function () {shopsInfo.resize();vendor.resize();company.resize();}})