CSS媒体查询用法和示例

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博客_媒体查询

媒体查询介绍：

附：什么是媒体查询？_dream_lifes的博客-CSDN博客_媒体查询