糊糊的前端学习笔记——当缩放浏览器窗口时出现CSS样式混乱情况的分析【Day3】

在刚学会做自适应的时候，我们喜欢用百分比定义宽度，却会遇到这样一个现象，如果页面头部样式定义了宽度100%，那么当浏览器窗口缩放的时候就会发现有部分内容被截断或显示不全。

解决：使用min-width对width:100%的对象加以限制；

补充：在做不同设备下的自适应网页时，会发现这个方法非常好用，即在 css 中设定 min-width即可；

@media (min-width: 768px) {
    #header .navbar-brand { margin: 4px 0; }
    #header .md-collapse { float: right; padding: 0; }
    #header .md-collapse li { border-bottom: 0 none; }
    #header .md-collapse li:last-child a { padding-right: 0; }
    #header li:last-child { box-shadow: none; }

}
@media (min-width: 1200px) {
    .iso-wrapper { width: 1200px; }
}

比如以上是我所做的一个手机PC端自适应的网页的代码，设置min-width后，即可在不同尺寸设备下应用不同的CSS样式。