首页 > 其他 > 详细

响应式布局

时间:2019-03-15 10:06:41      阅读:159      评论:0      收藏:0      [点我收藏+]
//HTML代码
<body>
  <img src="http://www.chenxin.art/imgs/xingkong.jpg" alt="drawing" />
</body>

//CSS代码
  img {
    width: 1200px;
    max-width: 100%;
  }
  1. 当浏览器的宽度大于或等于1200px 时,因为图片的宽度为 1200px ,满足“图片的宽度不能大于其父元素的宽度”这一限制条件,所以图片保持宽度 1200px 不变。
  2. 当浏览器的宽度小于 1200px 时,此时不满足“图片的宽度不能大于其父元素的宽度”这一限制条件,所以图片会缩小到满足条件为止,最后的结果就是图片的宽度会等于浏览器的宽度。这就是为什么图片会随着窗口的变窄而变小了。

  类似的 CSS 属性还有 min-width 、max-height 、min-height ,原理都是一样的,大家可以在这个网站上了解他们的详细用法。

媒体查询

  @media(max-width:480px){

    background:lightgreen

  }

  媒体查询的标识符是 @media 。上面这段代码的含义是:如果视窗的宽度小于 480px 时,将背景色变为淡绿色。

响应式布局

原文:https://www.cnblogs.com/ycyh1314/p/10535004.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!