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