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

Posted 2023-03-10

媒体查询是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. 这只是我在制作自适应网页时经常用到的几个关键分辨率，在实际工作时可以根据自己的需要自行增加或减少其关键分辨率，来实现更好的视觉效果。