admin管理员组

文章数量:1530046

在刚学会做自适应的时候，我们喜欢用百分比定义宽度，却会遇到这样一个现象，如果页面头部样式定义了宽度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样式。

本文标签： 缩放糊糊样式学习笔记混乱

版权声明：本文标题：糊糊的前端学习笔记——当缩放浏览器窗口时出现CSS样式混乱情况的分析【Day3】 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726627227a1078889.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。