Web 开发 Media 媒体类型介绍 - 文章教程

Web 开发 Media 媒体类型介绍

发布于 2017-11-16 字数 4198 浏览 1770 评论 0

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

Web 开发 Media 媒体类型介绍

媒体查询能干什么

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

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

Media Types 设备类型

Media Type
设备类型
CSS Version
版本
Compatibility
兼容性
Description
简介
all CSS2 IE4+ 用于所有设备类型
aural CSS2 NONE 用于语音和音乐合成器
braille CSS2 NONE 用于触觉反馈设备
embossed CSS2 NONE 用于凸点字符(盲文)印刷设备
handheld CSS2 NONE 用于小型或手提设备
print CSS2 IE4+ 用于打印机
projection CSS2 NONE 用于投影图像,如幻灯片
screen CSS2 IE4+ 用于计算机显示器
tty CSS2 NONE 用于使用固定间距字符格的设备。如电传打字机和终端
tv CSS2 NONE 用于电视类设备

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

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 的前缀,用来表示大于或者小于等于的逻辑,以此避免使用 < 或者 > 这些字符。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0