用 @media 控制图片显示大小
<link rel="stylesheet" type="text/css" href="600.css" media="screen and (max-width: 600px)">
屏幕自适应 调取css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Doc010ument</title> <style> html{font-size: 35px;} div{display: flex;max-width: 1000px;margin: 0 auto;flex-flow: row wrap;background-color: #c1c1c1;} ul{width: 100%;height: 1000px; } span{width: 24%;margin-right: 1%;} img{width: 100%;} /*body{background-color: red}*/ @media screen and (max-width: 800px) { span{width: 32%;margin-right: 1%;} } @media screen and (max-width: 500px) { span{width: 49%;margin-right: 1%;} } </style> </head> <body> <div> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> <span><img src="http://img3.imgtn.bdimg.com/it/u=1103669870,25234699&fm=26&gp=0.jpg" alt=""></span> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步