如何利用css3中@media实现响应式布局

利用css3中的@media属性可以针对不用媒体类型以及屏幕尺寸定义不同的样式。

语法

  @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	输出设备中的页面最小可见区域

Demo

  # 屏幕宽度小于768px采用`tab-h3`这个class
  @media (max-width: 768px) {
    .tab-h3 {
      font-size:20px;
    }
  } 

bootstrap中几个常用class对应尺寸对照

值	描述
.col-xs-	超小屏幕 手机(<768px)
.col-sm-	小屏幕 平板(>=768px)
.col-md-	中等屏幕 桌面显示器(>=992px)
.col-lg-	大屏幕 大桌面显示器(>=1200px)