用 @media 控制图片显示大小

最新推荐文章于 2021-12-05 00:15:40 发布

dianfengzao1245

最新推荐文章于 2021-12-05 00:15:40 发布

阅读量488

点赞数

原文链接：http://www.cnblogs.com/nice2018/p/9665118.html

版权

屏幕自适应调取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>

转载于:https://www.cnblogs.com/nice2018/p/9665118.html

dianfengzao1245

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用 @media 控制图片显示大小

<link rel="stylesheet" type="text/css" href="600.css" media="screen and (max-width: 600px)">屏幕自适应调取css<!DOCTYPE html><html lang="en"><head> <meta charse...
复制链接

扫一扫