响应式布局

最新推荐文章于 2024-10-21 08:42:32 发布

weixin_33804582

最新推荐文章于 2024-10-21 08:42:32 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ycyh1314/p/10535004.html

//HTML代码
<body>
  <img src="http://www.chenxin.art/imgs/xingkong.jpg" alt="drawing" /> </body> //CSS代码 img { width: 1200px; max-width: 100%; }

当浏览器的宽度大于或等于1200px 时，因为图片的宽度为 1200px ，满足“图片的宽度不能大于其父元素的宽度”这一限制条件，所以图片保持宽度 1200px 不变。
当浏览器的宽度小于 1200px 时，此时不满足“图片的宽度不能大于其父元素的宽度”这一限制条件，所以图片会缩小到满足条件为止，最后的结果就是图片的宽度会等于浏览器的宽度。这就是为什么图片会随着窗口的变窄而变小了。

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

媒体查询

　　@media（max-width：480px）{

　　　　background：lightgreen

　　}

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

转载于:https://www.cnblogs.com/ycyh1314/p/10535004.html