全面解析全面解析CSS Media媒体查询使用操作（推荐）媒体查询使用操作（推荐）
前面的话前面的话
一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在
了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容
媒介类型媒介类型
在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在
media属性用于为不同的媒介类型规定不同的样式
screen 计算机屏幕（默认值）计算机屏幕（默认值）
tty 电传打字机以及使用等宽字符网格的类似媒介电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection 放映机放映机
handheld 手持设备（小屏幕、有限的带宽）手持设备（小屏幕、有限的带宽）
print 打印预览模式打印预览模式 / 打印页打印页
braille 盲人用点字法反馈设备盲人用点字法反馈设备
aural 语音合成器语音合成器
all 适合所有设备适合所有设备
真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’
<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}
</style>
<div class="box"></div>
媒体属性媒体属性
媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用
与HTML和XML冲突的“<”和“>”字符
[注意]媒体属性必须用括号()包起来，否则无效
下表中列出了所有的媒体属性
width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid
【【1】颜色（】颜色（color））
指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0
向所有能显示颜色的设备应用样式表
<style>
@media (color){
.box{height: 100px;width: 100px;background-color: lightblue;}
}
</style>
<div class="box"></div>
【【2】颜色索引（】颜色索引（color-index））
颜色索引指定了输出设备中颜色查询表中的条目数量，如果没有使用颜色查询表，则值等于0
向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示，说明返回值为0)
weixin_38687199
- 粉丝: 4
- 资源: 924
最新资源
- comsol二氧化碳混相驱替，多孔介质驱替，油气，扩散，考虑浓度变化，速度变化，压力变化及混合流体粘度密度变化 相关案例，模型复现 多孔介质流动 多孔介质中的两相流动， 多尺度模拟，孔隙尺度建模，D
- comsol凝固组织模型
- 高比例清洁能源接入下计及需求响应的配电网重构（matlab代码） 该程序复现《高比例清洁能源接入下计及需求响应的配电网重构》，以考虑网损成本、弃风弃光成本和开关操作惩罚成本的综合成本最小为目标，针对配
- M00366-基于两阶段遗传算法和贪心策略的多约束排样问题优化研究 MATLAB实现含数据集
- NPC三电平逆变器中点点位平衡仿真 算法是王琛琛老师的 最优零序电压注入法 仿真0.2秒切到最优零序电压注入 中点点位平衡的效果非常好 只发仿真可可指导 IEEE TRANSACTIONS ON IN
- Python基础开发 工具安装包.zip
- COMSOL-弹性波 模型介绍： 激励信号为高斯子波和雷克子波，雷克子波通过时间分布，高斯子波通过x,y俩个变元在源空间进行定义 本模型采用弹性波，时域显示物理场，中心频率为170kHz，通过体载荷
- 图腾柱（totem pole）PFC电路仿真，采用电压电流双闭环PI控制 输出特性好 仿真中模拟了给定电压变化时的动态响应情况 可验证闭环控制的稳定性 另也有图腾柱PFC主电路参数的设计说明
- 传统车热管理建模与性能计算分析，利用Simulink建模，采用成熟软件架构，考虑驾驶乘员舱产热与空调调节系统，发动机产热建模与热管理系统，其中热力学建模为基础传热学公式搭建，详细可查看模型接口 包含
- 串联构型混合动力汽车Simulink仿真模型建模，正向仿真模型，采用成熟人车路软件架构，基于功率跟随控制策略，包含完整的初始化文件，整车模型，以及说明文档，可进行适当 也可提供其他变种构型，不考虑热
- 三相级联H桥载波移相调制仿真模型 A相3个H桥输出 ABC三相相电压 ABC三相相电流
- Python进阶开发\1python进阶篇
- PSRR 仿真教程，怎么仿真电路的psrr 两个电路案例，一个是16分频的分频器，一个是250MHz的环形压控振荡器 仿真方法是用Cadence的psspxf PSRR的测量对于改善对噪声源的免疫力很
- 基于S-S或LCC-S结构的WPT无线电能传输电路模型，采用输出电压闭环PI控制 另附带电路主结构参数设计说明和计算 运行环境为matlab simulink
- Python进阶开发进阶篇2-函数
- 最新版·基于超螺旋滑模观测器的永磁同步电机无位置传感器控制策略 全套仿真、公式推导、配套lunwen以及调试过程如图 补充最新资料
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
前往页