1.什么是媒体查询
- 使用@media查询,可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询
@media mediatype and|not|only (media feature){
css-code;
}
2.语法规范
- 用@media开通 注意@符号
- mediatype 媒体类型
- 关键字 and not only
- media feature 媒体特性,必须有小括号包含
部分示例:
iPhone X
@media only screen and (device-width: 375px) and (device-height: 812px) and
(-webkit-device-pixel-ratio: 3) {
}
iPhone XR
/* 1792x828px at 326ppi */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone XS
/* 2436x1125px at 458ppi */
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
参考文章:什么是媒体查询?_dream_lifes的博客-CSDN博客_媒体查询
媒体查询介绍: