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">