定义css设备类型-Media Queries图表简介及使用方法
移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕,CSS3完美地解决了这些问题。在CSS2.1版本时候,我们曾经为网站设计不同的CSS样式文件,如打印样式表文件,手机样式文件,电脑样式文件等等,css3提出的MediaQueries解决了这些问题。
CSS3的MediaQueries可以帮助设计师获取以下数据:
1.浏览器的窗口的宽度和高度,
2.设备的宽和高;
3.设备的手持方面,横向还是竖向;
4.分辨率;
到目前为止,MediaQueries模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。
MediaQueries的使用方法:
@media设备类型and(设备特性){样式代码}
在代码的开头必须要写"@media",然后制定设备类型。css中定义了
Media Types 媒体类型 |
CSS Version 版本 |
Compatibility 兼容性 |
Description 简介 |
---|---|---|---|
all | CSS2 | 所有浏览器 | 用于所有媒体设备类型 |
aural | CSS2 | Opera | 用于语音和音乐合成器 |
braille | CSS2 | Opera | 用于触觉反馈设备 |
handheld | CSS2 | Chrome,Safari,Opera | 用于小型或手持设备 |
CSS2 | 所有浏览器 | 用于打印机 | |
projection | CSS2 | Opera | 用于投影图像,如幻灯片 |
screen | CSS2 | 所有浏览器 | 用于计算机显示器 |
tty | CSS2 | Opera | 用于使用固定间距字符格的设备。如电传打字机和终端 |
tv | CSS2 | Opera | 用于电视类设备 |
embossed | CSS2 | Opera | 用于凸点字符(盲文)印刷设备 |
设备特性的书写放手与样式的书写方式很相似,分为两个部分,当中有冒号分割,冒号前书写设备的某种特性,冒号后书写该特性的具体值
对于这13种设备特性的说明如下表:
特性 | 可指定的值 | 是否允许使用min/max前缀 | 特性说明 |
width | 带单位的长度数值 | 允许 | 浏览器窗口的宽度 |
height | 带单位的长度数值 | 允许 | 浏览器窗口的高度 |
device-width | 带单位的长度数值 | 允许 | 设备屏幕分辨率的宽度值 |
device-height | 带单位的长度数值 | 允许 | 设备屏幕分辨率的高度值 |
orientation | 只能指定两个值:portrait或landscape | 不允许 | 浏览器窗口的方向是纵向还是横向,当窗口的高度值大于等于高度值时,该特性值为portrait, |
aspect-ratio | 比例值,例如:16/9 | 允许 | 浏览器窗口的纵横比,比例值为浏览器窗口的宽度值/高度值 |
device-aspect-ratio | 比例值,例如:16/9 | 允许 | 设备屏幕分辨率的纵横比,比例值为设备屏幕分辨率的宽度值/高度值 |
color | 整数值 | 允许 | 设备使用多少位的颜色值,如果不是彩色设备,该值为0 |
color-index | 整数值 | 允许 | 色彩表中的色彩数 |
monochrome | 整数值 | 允许 | 单色帧缓冲器中每像素的字节数 |
resolution | 分辨率值,譬如300dpi | 允许 | 设备的分辨率 |
scan | 只能指定两个值:progressive或interlace | 不允许 | 电视机类型设备的扫描方式,progressive表示逐行扫描,interlace表示隔行扫描 |
grid | 只能指定两个值:0或1 | 不允许 | 设备是基于栅格还是基于位图。基于栅格时该值为1,否则该值为0 |
使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,例如:
@mediascreenand(max-width:639px;)
设备特性的指定值接受min/max的前缀,用来表示大于或者小于等于的逻辑,以此避免使用<或者>这些字符。
阅读目录
- viewport设置适应移动设备屏幕大小
- Media Queries如何工作
- Media Queries语法总结
- media_type设备类型一览表
- media_feature设备特征一览表
viewport设置适应移动设备屏幕大小
viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
代码中的content属性可以设置如下6种不同参数
Media Queries如何工作
1、定义当前屏幕可视区域的宽度最大值是600像素
<link href="small.css" rel="stylesheet" media="screen and(max-width:600px)"/>
那么small.css怎样写的呢
@media screen and (max-width:600px) {.demo {background-color:red;} }
2、定义当前屏幕可视区域的宽度长度在600到900像素之间
<link href="small.css" rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)"/>
@media screen and (min-width:600px) and (max-width:900px) {.demo {background-color: red;} }
3、当移动屏幕处于纵向(portrait)模式下时,应用portrait样式文件,当移动设备处于横向(landscape)模式下,应用landscape样式文件
<link href="protrait.css" rel="stylesheet" media="all and(orientation:portrait)"/><link href="landscape.css" rel="stylesheet" media="all and(orientation:landscape)"/>
Media Queries语法总结
语法格式如下图所示:
1、使用Media Queries样式模块时都必须以“@media”方式开头
2、media_query表示查询关键定,比如说not only and 等等
- not表示对后面的样式表达式执行取反操作
- only让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式,对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的浏览器会忽略only关键字并直接根据页面的表达式应用样式 文件
3、media_type 指定设备类型(也称媒体类型)
4、media_feature定义css中的设备特征
media_type设备类型一览表
media_feature设备特征一览表
大部分设备特征都允许接受min/max的前缀
定义css设备类型-Media Queries图表简介及使用方法相关推荐
- 定义css设备类型-Media Queries
移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示.如何让同一个网站同时适应完全不同尺寸的屏幕,CSS3完美地解决了这些问题.在CSS2.1版 ...
- CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术, 响应式设计
上一篇我们介绍了Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到Responsive Web Desig n的实作方式有大 ...
- CSS3 Media Queries:移动 Web 的完美开端
移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有 ...
- css3 media queries
CSS3 Media Queries模板 作者:大漠 日期:2012-04-04 点击:3183 最早在<CSS3 Media Queries>一文中初探了CSS3的媒体类型和媒体特性 ...
- CSS:媒体查询 CSS3 Media Queries
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
- 【原】YUI压缩与CSS media queries下的bug
大概是上个月,使用YUI压缩一个css文件后,发现只要是被压缩后的css文件有部分根本无法工作,一直都不知啥问题引起的,让我感到头疼. 今天发现了只要是在媒体查询中的样式无法起作用,于是才开始怀疑是m ...
- CSS之Responsive设计和CSS3 Media Queries的结合
随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机.小笔记本.iPad.Playbook,以及PC机,而且PC机的显展大小各不一致.这样一来不同的屏幕分 ...
- CSS之不使用Media Queries的自适应CSS
虽然标题说不用Media Queries,但我还是要在开头讲清楚,本文并不是要大家丢掉Media Queries,也不是要抨击Media Queries.Media Queries实际上非常有用,我在 ...
- html调用媒体图标,关于CSS 媒体查询(media queries)
传统的CSS只支持数量有限的设备显示规则,如:all.screen.print.handheld.television和projector.这些对于设备的尺寸.方向或分辨率没有任何的定论.CSS2.1 ...
最新文章
- DIY机器人?硬件创新也是潮流
- 牛津大学名誉教授Colin Blakemore:大脑是如何计算的?
- 安装Oracle Database 11g 找不到文件“WFMLRSVCApp.ear” .
- 嵌入式驱动程序之信号量
- 近两年火热的微服务springboot不同配置文件详细讲解
- InMobi收购美国Sprint旗下数据和广告公司Pinsight Media
- python对象模型_[译] 用 Python 实现一个最简单的对象模型
- 今日代码(200725)--数据录入(python+mysql)
- Android 系统(83)---屏幕尺寸
- LeetCode(118)——杨辉三角(JavaScript)
- SDK 可能是数百万 iPhone 上的特洛伊木马
- 单片机c语言常用的语句有几条,单片机C语言教程-基础语句
- thinkpadt410接口介绍_ThinkPadT410全程拆解
- 全国省市区信息,mysql数据库记录
- Contrastive Learning NLP Papers
- 原生 js 实现点击按钮复制文本
- IFB上挂载NETEM
- 解决office,word奔溃的问题
- 很全的敏感词匹配系统的设计与实践
- 简练软考知识点整理-估算活动资源
热门文章
- 【音频处理】Melodyne 选择工具使用 ( 主工具简介 | 修改音高 | 自动吸附 | 音符长度修改 | 长度自动吸附 | 设置音符分离线 | 设置片段分离线 )
- 【设计模式】建造者模式 ( 简介 | 适用场景 | 优缺点 | 代码示例 )
- 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
- 【Android 高性能音频】OboeTest 音频性能测试应用 ( 应用简介 | 测试内容 | 输出测试 | Oboe 缓冲区 与 工作负载修改 | 测试案例 )
- 【运筹学】线性规划数学模型 ( 单纯形法 | 第一次迭代 | 方程组同解变换 | 计算新单纯形表 | 计算检验数 | 入基变量选择 | 出基变量选择 )
- 【C++ 语言】Visual Studio 配置 POSIX 线程 ( Windows 不支持 POSIX | 配置文件下载 | 库文件说明 | 配置过程 )
- 【网站搭建】搭建独立域名博客 -- 独立域名博客上线了 www.hanshuliang.com
- [机器学习] 训练集(train set) 验证集(validation set) 测试集(test set)
- MVC4 学习笔记01
- springmvc整合redis架构搭建实例