设备划分 | 尺寸区间 |
---|---|
超小屏幕 (手机) | < 768px |
小屏设备 (平板) | >= 768px ~ < 992px |
中等屏幕 (桌面显示器) | >= 992px ~ <1200px |
宽屏设备 (大桌面显示器) | >= 1200px |
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口设置:视口宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
超小屏幕 (手机) < 768px | 小屏设备 (平板) >=768px | 中等屏幕 (桌面显示器) >=992px | 宽屏设备 (大桌面显示器) >=1200px | |
---|---|---|---|---|
.container 最大宽度 | 自动(100%) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg |
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">列嵌套</div>
<div class="col-sm-6">列嵌套</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-push-8">左侧</div>
<div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>
类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
---|---|---|---|---|
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |