Css|Css - 媒体查询
一. 媒体查询作用?
【Css|Css - 媒体查询】一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。二. 在哪里使用媒体查询?
- link标签内
- Css样式表内
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
三. 基本语法
@media 媒体类型 and (媒体特性){
样式
}
四. 逻辑操作符
操作符 | 描述 |
---|---|
and |
合并多条 |
not |
取非 |
only |
防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式 |
, (相当于or ) |
或运算 |
常用媒体类型 | 描述 |
---|---|
all | 所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
常用媒体特性 | 描述 |
---|---|
max-width / max-height | 最大宽高,当前设备小于该值时生效 |
min-width / min-height | 最小宽高,当前设备大于该值时生效 |
min-resolution / max-resolution / resolution | 分辨率 |
aspect-ratio / max-aspect-ratio / min-aspect-ratio | 可见区域宽高比 |
device-aspect-ratio / min-device-aspect-ratio / max-device-aspect-ratio | 设备宽高比 |
device-height / min-device-height / max-device-height | 设备高度 |
device-width / min-device-width / max-device-width | 设备宽度 |
orientation | 方向,判断设备处于横屏还是竖屏 |
monochrome / min-monochrome / max-monochrome | 主要用于判断是否为黑白屏 |
grid | 判断输出设备是网格设备还是位图设备 |
color / min-color / max-color | 判断设备输出颜色数 |
color-index / min-color-index / max-color-index | 指定了输出设备中颜色查询表中的条目数量 |
- 根据宽度调整样式
@media screen and (min-width:1000px) and (max-width:2000px) {
body{
background-color: green;
}
}
@media screen and (min-width:100px) and (max-width:1000px) {
body{
background-color: red;
}
}
- 根据横屏和竖屏调整样式
/* 竖屏 */
@media screen and (orientation:portrait){
body{
background-color: green;
}
}
/* 横屏 */
@media screen and (orientation:landscape){
body{
background-color: red;
}
}
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- mybatisplus如何在xml的连表查询中使用queryWrapper
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 人如果没梦想,和咸鱼有什么区别(自媒体时代把握住就能咸鱼翻身)
- 自媒体形势分析
- 诱惑的世界
- 新媒体时代,你需要掌握的必备技能
- 数据库|SQL行转列方式优化查询性能实践