Web 开发 Media 媒体类型介绍

发布于 2017-11-16 21:43:50 字数 3332 浏览 1943 评论 0

移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺 寸的屏幕,CSS3 完美地解决了这些问题。在 CSS2.1 版本时候,我们曾经为网站设计不同的 CSS 样式文件,如打印样式表文件、手机样式文件、电脑样式 文件等等,CSS3 提出的 Media Queries 媒体查询解决了这些问题。

Web 开发 Media 媒体类型介绍

媒体查询能干什么

CSS3 的 Media Queries 媒体查询可以帮助设计师获取以下数据:

  • 浏览器的窗口的宽度和高度
  • 设备的宽和高
  • 设备的手持方面,横向还是竖向
  • 分辨率

Media Types 设备类型

Media Type
设备类型
CSS Version
版本
Compatibility
兼容性
Description
简介
allCSS2IE4+用于所有设备类型
auralCSS2NONE用于语音和音乐合成器
brailleCSS2NONE用于触觉反馈设备
embossedCSS2NONE用于凸点字符(盲文)印刷设备
handheldCSS2NONE用于小型或手提设备
printCSS2IE4+用于打印机
projectionCSS2NONE用于投影图像,如幻灯片
screenCSS2IE4+用于计算机显示器
ttyCSS2NONE用于使用固定间距字符格的设备。如电传打字机和终端
tvCSS2NONE用于电视类设备

设备特性的书写放手与样式的书写方式很相似,分为两个部分,当中有冒号分割,冒号前书写设备的某种特性,冒号后书写该特性的具体值

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 关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,例如下面的代码:

@media screen and(max-width:639px;)

设备特性的指定值接受 min/max 的前缀,用来表示大于或者小于等于的逻辑,以此避免使用 < 或者 > 这些字符。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。