响应式的实现 —— 媒体查询

154 阅读1分钟

前言: 使用媒体查询(@media查询),可以针对不同的媒体类型定义不同的样式。通过获取页面宽度,从而改变页面样式及布局,来达到响应式效果。

媒体类型: 包含(all,print,screen,speech)
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕,平板电脑,智能手机等 4.屏幕阅读器等发声设备

业务场景: 需要为screen的媒体类型在不同的宽度分辨率定义不同的样式,以实现响应式的功能。

image.png

代码含义: 页面最小可见区域宽度大于等于1079px时,icon-ico_close1的font-size属性为30px,不满足的于此宽度需求的媒体设备则font-size为25rpx。