css布局rem媒体查询是什么(媒体查询怎么用)

 分类:div+css教程时间:2022-10-05 07:30:01点击:

今天来学习前端rem布局中的媒体查询。

1.什么是媒体查询?

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

2.媒体查询怎么使用?

语法格式如下:@media 媒体类型 逻辑运算符 (媒体特征){css样式}

媒体类型有四种,all代表所有的媒体设备;print 用于打印机;screen 用于电脑屏幕、平板、手机等(这也是我们通常选择的媒体类型);speech 用于屏幕阅读器。

逻辑运算符:这个我们应该不陌生。分为三种:and、or、not。

媒体特征:书写格式与css样式类似,都是属性名:属性值(例如min-width:200px)。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: