解释一下该例子的原理-慕课网

解释一下该例子的原理

来源：11-8 Responsive设计——不同设备的分辨率设置

RainbowPeter

2015-02-01 16:54

当width>480px的时候，就是一个绿色的div里面包含一个橙色的div和一个蓝色的div,因为左边的div设置的宽度是20%，右边的div是%78,还剩下100-20-78=2,即2%，所以中间会出现一小段绿色的背景，是因为父div的背景色还没完全覆盖掉；

当width<=480px的时候，@media (max-width: 480px) {....}这段样式代码就生效了，float：none；

width:100%; 把float去除了，宽度设置%100，所以橙色div和绿色div就分2行显示了，这时候，父div的绿色背景色就被全部覆盖掉了；

写回答关注

十天精通CSS3

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

242554 学习 · 2623 问题

相似问题

回答 5

回答 1

回答 1

回答 3

回答 1