<link rel="stylesheet" type="text/css" href="600.css" media="screen and (max- 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- 800px) { span{width: 32%;margin-right: 1%;} } @media screen and (max- 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>