bootstrap的视口检测和媒体查询

1.视口检测

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.媒体查询写法

(1).在style标记中写@media代码

@media screen and (max-width: 屏宽 ) {css代码…… }
@media screen and (min-width: 屏宽 ) {css代码…… }
或者
@media  (max-width:屏宽 ) {css代码…… }
@media  (min-width:屏宽 ) {css代码…… }

(2).在单独的css文件里写@media代码，再通过link调用css文件

<link  media="screen and (max-width: 屏宽)" href="css文件" rel="stylesheet">
<link  media="screen and (min-width: 屏宽)" href="css文件" rel="stylesheet">
或者
<link  media="(max-width: 屏宽)" href="css文件" rel="stylesheet">
<link  media="(min-width: 屏宽)" href="css文件" rel="stylesheet">

(3).在max-width或者min-width之间添加device

@media screen and (max-device-width: 屏宽) {css代码…… }
@media screen and (min-device-width: 屏宽) {css代码…… }
或者
@media  (max-device-width: 屏宽) {css代码…… }
@media  (min-device-width: 屏宽) {css代码…… }

(4).判断显示屏幕宽度还可以表示一个区间

@media (min-width: 屏宽1) and (max-width: 屏宽2) {css代码…… }
或者
@media screen and (min-width: 屏宽1) and (max-width: 屏宽2) {css代码…… }
或者
<link  media=" (min-width: 屏宽1) and (max-width: 屏宽2) " href="css文件" rel="stylesheet">
或者
<link  media=" screen and (min-width: 屏宽1) and (max-width: 屏宽2) " href="css文件" rel="stylesheet">