响应式布局语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
# 针对不同的媒体类型以及屏幕尺寸引入不同的外链样式文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">列举常用的媒体类型和屏幕尺寸如下：
媒体类型
all 所有设备
screen 用于电脑屏幕、平板、手机等
媒体功能
max-width 输出设备中的页面最大可见区域
min-width 输出设备中的页面最小可见区域
bootstrap中几个常用class对应尺寸对照
.col-xs- 超小屏幕 手机(<768px)
.col-sm- 小屏幕 平板(>=768px)
.col-md- 中等屏幕 桌面显示器(>=992px)
.col-lg- 大屏幕 大桌面显示器(>=1200px)
以上就是如何通过css响应式布局？的详细内容，更多请关注易知道|edz.cc其它相关文章！
