css - 为什么这个图片的设置了媒体查询却无效？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - 为什么这个图片的设置了媒体查询却无效？

天蓬老师 2017-04-17 13:25:18

[HTML讨论组]

512

为什么我浏览器宽度弄到480px时为什么图片宽度还是10%呢为什么不是50%？

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
    #p1{width: 50%;height: 500px;background-color: blue;}
    #img1{width: 10%;height: 30px;display: inline-block;}
    @media(min-width: 420px)and(max-width: 550px;){
      #img1{display: inline-block;width: 50%;height: 30px;}
    }
    </style>
</head>
<body>
<p id="p1">
    <img src="1.jpg" id="img1">
</p>

</body>
</html>

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(1)

伊谢尔伦2017-04-17 13:27:18 1楼

@media (min-width : 420px) and (max-width : 550px){

  #img1{display: inline-block;width: 50%;height: 30px;}
}

注意空格

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

app下载

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

PHP学习

技术支持

返回顶部