定义css设备类型-Media Queries图表简介及使用方法


Posted in HTML / CSS onJanuary 21, 2013

移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕,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 用于小型或手持设备
print 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的前缀,用来表示大于或者小于等于的逻辑,以此避免使用<或者>这些字符。
HTML / CSS 相关文章推荐
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 #HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 #HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 #HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 #HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 #HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 #HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 #HTML / CSS
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python编写简单的HTML页面合并脚本
2016/07/11 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
教师年终个人自我评价
2013/10/04 职场文书
学习决心书
2014/03/11 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
婚礼司仪主持词
2014/03/14 职场文书
护理专业自荐书
2014/06/04 职场文书
求职信的正确写法
2014/07/10 职场文书
公司合作协议范文
2014/10/01 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技