CSS媒体查询(@media)全面解析
随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览 Web 内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。
媒体查询是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件,让所有用户都能得到很好的用户体验。
1. 媒体类型
媒体类型用来表示设备的类别,CSS 中提供了一些关键字来表示不同的媒体类型,如下表所示:
媒体类型 | 描述 |
---|---|
all | 表示所有的媒体设备 |
aural | (听觉的,听的)表示语音和音频合成器(听觉设备) |
braille | (用盲文写的)表示盲人用点字法触觉回馈设备 |
embossed | 表示盲人用点字法打印机 |
handheld | 表示小型手持设备,如手机、平板电脑 |
表示打印机 | |
projection | 表示投影设备 |
screen | 表示电脑显示器 |
tty | 表示使用固定密度字母栅格的媒体,比如打字机或终端设备 |
tv | 表示电视机类型的设备 |
2. 媒体特性
除了具体的类型外,还可以通过一些属性来描述设备的具体特征,例如宽度、高度、分辨率等,如下表所示:
值 | 描述 |
---|---|
aspect-ratio | (纵横比)输出设备页面可见区域的宽高比 |
color | 输出设备每个像素的比特值,常见的有 8、16、32 位。如果设备不支持输出彩色,则该值为 0 |
color-index | 输出设备的颜色查询表中的条目数量。如果没有使用颜色查询表,则该值等于 0 |
device-aspect-ratio | 输出设备的宽高比 |
device-height | 输出设备屏幕的可见高度 |
device-width | 输出设备屏幕的可见宽度 |
grid | 查询输出设备使用的是网格屏幕还是点阵屏幕 |
height | 页面可见区域的高度 |
max-aspect-ratio | 输出设备屏幕可见区域宽度与高度的最大比率 |
max-color | 输出设备每个像素比特值的最大值 |
max-color-index | 输出设备的颜色查询表中的最大条目数 |
max-device-aspect-ratio | 输出设备屏幕可见区域宽度与高度的最大比率 |
max-device-height | 输出设备屏幕可见区域的最大高度 |
max-device-width | 输出设备屏幕的最大可见宽度 |
max-height | 页面可见区域的最大高度 |
max-monochrome | 输出设备单色帧缓冲区中每个像素的最大位深度。如果设备并非黑白屏幕,则该值为 0 |
max-resolution | 设备的最大分辨率 |
max-width | 页面可见区域的最大宽度 |
min-aspect-ratio | 输出设备屏幕可见区域宽度与高度的最小比率 |
min-color | 输出设备每个像素比特值的最小值 |
min-color-index | 输出设备的颜色查询表中的最小条目数 |
min-device-aspect-ratio | 输出设备的屏幕可见区域宽度与高度的最小比率 |
min-device-width | 输出设备的屏幕的最小可见宽度 |
min-device-height | 输出设备的屏幕的最小可见高度 |
min-height | 页面可见区域的最小高度 |
min-monochrome | 输出设备单色帧缓冲区中每个像素的最小位深度。如果设备并非黑白屏幕,则该值为 0 |
min-resolution | 设备的最小分辨率 |
min-width | 页面可见区域的最小宽度 |
monochrome | 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕,则该值为 0 |
orientation | 页面可见区域的旋转方向 |
resolution | 设备的分辨率。如:96dpi、300dpi、118dpcm |
scan | 电视类设备的扫描工序 |
width | 页面可见区域的宽度 |
3. 逻辑操作符
逻辑操作符包含 not、and 和 only 三个,通过逻辑操作符可以构建复杂的媒体查询,您还可以通过逗号来分隔多个媒体查询,将它们组合为一个规则。
- and:用于将多个媒体查询组合成一条媒体查询,当每个查询规则都为真时则该条媒体查询为真,另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起;
- not:用于否定媒体查询,当查询规则不为真时则返回 true,否则返回 false。如果使用 not 操作符,则还必须指定媒体类型;
- only:仅在整个查询匹配时才会生效,当不使用 only 时,旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen,忽略查询的其余部分,并将样式应用于所有屏幕。 如果使用 only 运算符,则还必须指定媒体类型。
4. 定义媒体查询
目前您可以通过以下两种方式来定义媒体查询:
- 使用 @media 或 @import 规则在样式表中指定对应的设备类型;
- 用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。
1) @media
在《CSS @规则》一节中我们已经简单了解 @media,使用 @media 您可以指定一组媒体查询和一个 CSS 样式块,当且仅当媒体查询与正在使用的设备匹配时,指定的 CSS 样式才会应用于文档。示例代码如下:
/* 在小于或等于 992 像素的屏幕上,将背景色设置为蓝色 */
@media screen and (max-width: 992px) {body {background-color: blue;}
}/* 在 600 像素或更小的屏幕上,将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {body {background-color: olive;}
}
2) @import
@import 用来导入指定的外部样式文件并指定目标的媒体类型,示例代码如下:
@import url("css/screen.css") screen; /* 引入外部样式,该样式仅会应用于电脑显示器 */
@import url("css/print.css") print; /* 引入外部样式,该样式仅会应用于打印设备 */
body {background: #f5f5f5;line-height: 1.2;
}
注意:所有 @import 语句都必须出现在样式表的开头,而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。
3) media 属性
您还可以在 <style>、<link>、<source> 等标签的 media 属性中来定义媒体查询,示例代码如下:
/* 当页面宽度大于等于 900 像素时应用该样式 */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* 当页面宽度小于等于 600 像素时应用该样式 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
提示:在 media 属性中您还可以指定多种媒体类型,每种媒体类型之间使用逗号进行分隔,例如 media="screen, print"。
转自:CSS媒体查询(@media)全面解析
CSS媒体查询(@media)全面解析相关推荐
- CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
- CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
前言 在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用,然后就模仿里边写了个简单例子,代码如下: body {background-color: #f5f ...
- css media区间宽带显示,css媒体查询 @media适配不一样大小窗口
版权声明:本文为博主原创文章,未经博主容许不得转载. https://blog.csdn.net/Lockey23/article/details/75452536css CSS3 @media是什么 ...
- css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...
Hamburger_icon PC端和手机移动端均适配,依据设备的宽度大小决定是否值下拉菜单样式 一. head里添加meta移动端的样式 width viewport的宽度 height viewp ...
- CSS 媒体查询@media 适配 iPhone 6/7/8、iPhone 6/7/8 Plus、 iPhone X和ipad横竖屏
<style lang="less" rel="stylesheet/less" type="text/less" scoped> ...
- CSS媒体查询 @media
PC端和移动端自适应,自动换行 1 @media screen and (max-width: 850px) { /*以下代码在屏幕小于850的情况下执行*/ 2 .dsad{ /*父类*/ 3 di ...
- media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖?
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...
- CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
- 什么是CSS媒体查询
什么是CSS媒体查询? 一.CSS媒体查询概念 CSS媒体查询即media quaries,可以针对不同的媒体类型定义不同的样式,从而实现响应式布局.也可以针对不同的分辨率定义不同的样式. 1024分 ...
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
最新文章
- 【SpringCloud】Eureka工作原理
- 【新技术】CentOS系统下docker的安装配置及使用详解
- 复制Excel分类汇总结果的三种方法
- slr1文法_SLR的完整形式是什么?
- 谁拿了最多奖学金(洛谷-P1051)
- C# WinForm窗口最小化到系统托盘
- RabbitMQ 菜鸟教程
- 单点登录(SSO)-- 实现单点登录的几种方式
- c语言项目研发实训,C语言实训项目表V1.0.doc
- DBA的工作职责是什么?
- 情人节用python来表白女神
- 怎么在微信公众平台上传PPT?
- 什么是java框架结构_什么是JAVA类集框架啊?具体指的是什么?是JAVA类的框架结构么?...
- es与数据库的同步方案
- 企业oa管理系统是什么
- 计算机图形学(三)_图元的属性_4_线的属性_1_线宽
- 几幅图教你区分数字地、模拟地、电源地、单点接地
- 非主流伤感QQ空间日志_享受着自己的那份孤独
- 偶尔出现404怎么回事?
- 概率分布分位点_常用概率分布总结(1)
热门文章
- 小程序登陆-微信小程序登录-支付宝小程序登录-头条小程序登录
- 廉颇老矣?尚能饭否?64岁的Python之父被微软录取!
- Windows相关产品密钥
- vr软件测试,如何进行VR可用性测试?
- 计算机控制人脑的电影,推荐20部全球经典烧脑电影,考验你智商的时刻到了(上)...
- 职称计算机word中文字处理,职称计算机Word2003中文字处理考试大纲
- 2021年全国居住场所火灾死亡人数、受伤人数、火灾发生原因及造成直接财产损失分析[图]
- 彻底搞清类的依赖关系、关联关系、聚合关系、组合关系
- 【数据分析项目实战】篇1:游戏数据分析——新增、付费和用户行为评估
- Golang的chan阻塞测试