利用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) |
