本文介绍了使用Bootstrap实现响应式布局的方法，通过媒体查询在不同屏幕尺寸下调整container的宽度，确保在超小屏、小屏、中屏和大屏设备上自适应显示。同时提到了视口单位vwh和vh的应用，特别是在移动端设计中调整元素大小的场景。文章附带了各设备上的展示效果，展示了一个能够适应各种屏幕结构变化的响应式设计。
响应式布局：通过媒体查询在不同的屏幕将container的宽度改变
基于Bootstrap的响应式开发：在不同屏幕下将container划分为12份，
超小屏幕下（<768px）加类前缀（.col-xs-份数）
小屏幕（>=768px）（.col-sm-）
中等屏幕（>=992px）（.col-md-）
大屏（>=1200px）(.col-lg-)
新知识：
vwh和vh相对于视口的（将视口划分为100份） 一般使用vw且一般在移动端使用
效果图：能够自适应与各大屏幕结构发生变化
pc端（>=992px）：
ipad端（>=768px）：
手机端：
扫一扫
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
