关于css3媒体查询Media的一些用法小结

媒体查询是CSS3中的重要特性，针对不同的设备和屏幕尺寸创建不同的样式，使用@media规则编写，定义一组样式在特定条件时才会进行读写渲染。

最常见的是设置不同的屏幕尺寸，使用min-width和max-width属性进行定义。

eg. 在屏幕宽度在640到767像素之间时应用样式：

/* 多用于平板端或者手机横屏 */
@media screen and (min-width: 640px) and (max-width: 767px) {
  /* css样式 */
}

还可以基于设备特征（例如屏幕分辨率和方向）应用样式。

eg. 在屏幕分辨率大于150点每英寸（dpi）时应用样式：

@media screen and (min-resolution: 150dpi) {
  /* css样式 */
}

还可以使用and、not和only操作符组合，以创建更复杂的条件。

eg. 在640到767像素宽的屏幕和纵向方向时应用样式：

@media screen and (min-width: 640px) and (max-width: 767px) and (orientation: portrait) {
  /* css样式 */
}

还可以根据不同媒体类型（例如打印时）应用不同的样式。

eg. 仅在文档打印时应用样式：

@media print {
  /* css样式 */
}

前端开发人员通过使用媒体查询，可以为网站或应用在不同状态下呈现出不同的视觉效果。

---

以下是在网页自适应布局中，我常用的媒体查询代码：

/* @media实现网页自适应中的几个关键分辨率 */

/* >=1200px的设备 */
@media screen and (min-width:1200px){
  /* css样式 */
} 

/* <=1199px and >=1024px的设备 */
@media screen and (min-width: 1024px) and (max-width:1199px) {
  /* css样式 */
}

/* <=1023px and >=960px的设备 */
@media screen and (min-width: 960px) and (max-width:1023px) {
  /* css样式 */
}

/* <=959px and >=768px的设备 */
@media screen and (min-width: 768px) and (max-width:959px) {
  /* css样式 */
}

/* <=767px and >=640px的设备 */
@media screen and (min-width: 640px) and (max-width:767px) {
  /* css样式 */
}

/* <=639px and >=480px的设备 */
@media screen and (min-width: 480px) and (max-width:639px) {
  /* css样式 */
}

/* <=479px and >=375px的设备 */
@media screen and (min-width: 375px) and (max-width:479px) {
  /* css样式 */
}

/* <=374px的设备 */
@media screen and (max-width:374px){
  /* css样式 */
}

P.S. 这只是我在制作自适应网页时经常用到的几个关键分辨率，在实际工作时可以根据自己的需要自行增加或减少其关键分辨率，来实现更好的视觉效果。

---

[1] ​​原文阅读​​

[2] 我是 Just，听说长的好看的都关注订阅号[ 设计师工作日常 ]了！skr~ skr~