如何通过css响应式布局？

响应式布局语法：

 @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响应式布局？的详细内容，更多请关注0133技术站其它相关文章！