好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

媒体查询简介

1. 前言

其实响应式并不仅仅是屏幕窄了就换行,屏幕宽了就填充这么简单。

有很多时候是需要根据设备的不同来 显示 不同的布局结构,比如在手机屏幕上用单列布局刚刚好,但是这个网址被台式机访问的话单列就会显得过于宽,这时就要根据不同的设备来运行不同的 代码 ,那么怎么才能知道当前的设备呢?这就是本节我们要讲到的媒体 查询 。

2. 什么是媒体 查询

媒体:  就是当前使用的各种设备( 移动设备、固定设备等 )  查询 :  通过 查询 当前属于何种设备以运行不同的 代码

如果问大家媒体一般都指的哪些设备,大多数人都会回答:手机、平板、笔记本和台式机这四种。

但其实这四种在媒体 查询 的眼里只算一种设备,是不是觉得有些不可思议,那还能有什么别的设备呢?
那咱们就来罗列一下媒体 查询 的所有设备给大家看一眼:

媒体类型用于语音和声音合成器应用于盲文触摸式反馈设备 用于打印的盲人印刷设备用于掌上设备或更小的装置,如PDA和小型电话用于打印机和打印预览 用于投影设备用于电脑屏幕、平板电脑、智能手机等 应用于屏幕阅读器等发声设备用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备用于电视和网络电视

乍一看是不是有点晕?这么多 属性 ……不过,咱们要好好感谢一下科技的进步,随着科技的飞速发展,许多设备现在都淘汰了:像以前的BB机、传呼机、掌上电脑之类的……( 知道这些设备的都暴露年龄了 )

所以,咱们再来看一眼现在还没废弃的设备表:

这次看起来是不是清爽了许多?除了那个all代表所有设备,其他的就只剩仨了:

screen:  这是我们最常用的那些带屏幕的设备 print:  网页其实也是可以通过打印机来打印出来的 speech:  这个不是很常用,除非是那种专门做屏幕 自动 阅读网站的公司

3. screen

我们日常所见到的那些网页,都是通过屏幕来 显示 出来的,在媒体 查询 这里并没有什么手机、平板、笔记本之分,它会把它们通通归类为屏幕设备。

那么怎么才能区分屏幕设备到底是手机、平板、笔记本还是台式机呢?这就是下一小节要说到的媒体 功能 啦。
利用媒体 功能 来判断宽度,就能猜出来 用户 用的大概是个什么设备,然后根据设备的不同来 显示 不同的样式。

4. print

但是有时候我想打印 一个 网页,比如你觉得这节教程写的非常棒,但是 内容 太多了一下子记不住,打算把它打印在纸上没事的时候就看看,打印出来以后你就会发现有这几个问题:

样式有可能会乱 打印出来很多没用的 内容   打印用了很多张纸

因为纸张的大小一般就是A4,和电脑屏幕的比例可不一样,在电脑上看着正常的样式,换个比例可能就会乱。

在电脑上有意义的东西可能在纸上就没意义了,比如那些按钮,点击返回 上一页 什么的,在电脑上可以点,在纸上就变成了 一个 占地儿的摆设。

用户 真正在意的,也就是那些想打印在纸上的这些 文字  内容 ,所以需要用  print  来检测是否为打印设备,是的话就 不显示 那些按钮啊、广告啊、视频啊等等那类的样式了,重点突出的是想打印在纸上的 内容 。

5. speech

有时候想听个小说,当然现在专门有那种听小说的网站,像什么喜马拉雅之类的,可以直接听真人读出来的录音,所以这个不常用。

但假如用朗读软件读取屏幕上 内容 的时候,你应该不想听到: 首页 、登陆、 注册 、返回等这些没必要读出来的字眼…

用这个可以 屏蔽 掉那些没有必要读出来的 内容 。

6. 小结

本节我们主要介绍了:

什么是媒体 查询   媒体 查询 都有哪些种类 screen 的含义 print 的含义 speech 的含义

那么下一小节我们就来讲一下媒体 功能 。

查看更多关于媒体查询简介的详细内容...

  阅读:34次

上一篇

下一篇

第1节:中文布局 CSS 库    第2节:绝对定位    第3节:绝对定位+负边距    第4节:绝对定位+平移    第5节:网格布局    第6节:弹性布局    第7节:表格布局    第8节:外边距    第9节:绝对定位 + 平移    第10节:行内块元素    第11节:增光添彩    第12节:中文布局CSS库    第13节:多列属性    第14节:左浮动法    第15节:固定定位    第16节:非固定定位    第17节:固定定位+渐隐渐现    第18节:边框九宫格    第19节:加入边框    第20节:改进版    第21节:经典面试题    第22节:课程简介    第23节:移动端的迭代速度    第24节:移动端的屏幕长宽比    第25节:居中布局简介    第26节:中文布局 CSS 库实现居中布局    第27节:绝对定位实现居中布局    第28节:绝对定位+负边距实现居中布局    第29节:绝对定位+平移实现居中布局    第30节:网格布局实现居中布局    第31节:弹性布局实现居中布局    第32节:表格布局实现居中布局    第33节:单列布局简介    第34节:外边距实现单列布局    第35节:弹性布局实现单列布局    第36节:网格布局实现单列布局    第37节:网格布局实现单列布局    第38节:绝对定位+平移实现单列布局    第39节:行内块元素实现单列布局    第40节:增光添彩单列布局    第41节:双列布局简介    第42节:中文 布局CSS库实现双列布局    第43节:多列属性实现双列布局    第44节:左浮动实现双列布局    第45节:绝对定位实现双列布局    第46节:弹性布局实现双列布局    第47节:网格布局实现双列布局    第48节:增光添彩双列布局    第49节:吕形布局简介    第50节:固定定位实现吕形布局    第51节:中文布局CSS库实现吕形布局    第52节:外边距的作用    第53节:非固定定位实现吕形布局    第54节:固定定位+渐隐渐现吕形布局    第55节:上下栏布局简介    第56节:上下栏布局中文布局CSS库    第57节:固定定位实现上下栏布局    第58节:外边距的作用上下栏布局    第59节:非固定定位实现上下栏布局    第60节:固定定位+渐隐渐现上下栏布局    第61节:九宫格简介    第62节:中文布局CSS库实现九宫格    第63节:网格布局实现九宫格布局    第64节:表格布局实现九宫格布局    第65节:绝对定位实现九宫格布局    第66节:弹性布局实现九宫格布局    第67节:左浮动实现九格宫布局    第68节:弹性布局实现九宫格布局    第69节:加入边框 九宫格    第70节:边框九宫格实现九宫格    第71节:改进版九宫格布局    第72节:九宫格经典面试题    第73节:响应式简介    第74节:响应式布局中文布局CSS库    第75节:网格布局之应式布局    第76节:弹性布局之响应式布局    第77节:左浮动法之响应式布局    第78节:媒体查询简介    第79节:媒体属性    第80节:逻辑操作符