body {background-color: #c3c3c3}

用 @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>

 

posted @ 2018-09-17 21:45  最美胡萝卜  阅读(758)  评论(0)  编辑  收藏  举报
body {background-color: #c3c3c3}