您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

媒体查询简介

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

如果问大家媒体一般都指的哪些设备,大多数人都会回答:手机、平板、笔记本和台式机这四种。
但其实这四种在媒体的眼里只算一种设备,是不是觉得有些不可思议,那还能有什么别的设备呢?
那咱们就来罗列一下媒体的所有设备给大家看一眼:

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

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

我们日常所见到的那些网页,都是通过屏幕来出来的,在媒体这里并没有什么手机、平板、笔记本之分,它会把它们通通归类为屏幕设备。
那么怎么才能区分屏幕设备到底是手机、平板、笔记本还是台式机呢?这就是下一小节要说到的媒体啦。
利用媒体来判断宽度,就能猜出来用的大概是个什么设备,然后根据设备的不同来不同的样式。

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

因为纸张的大小一般就是A4,和电脑屏幕的比例可不一样,在电脑上看着正常的样式,换个比例可能就会乱。
在电脑上有意义的东西可能在纸上就没意义了,比如那些按钮,点击返回什么的,在电脑上可以点,在纸上就变成了占地儿的摆设。

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

有时候想听个小说,当然现在专门有那种听小说的网站,像什么喜马拉雅之类的,可以直接听真人读出来的录音,所以这个不常用。
但假如用朗读软件读取屏幕上的时候,你应该不想听到:、登陆、、返回等这些没必要读出来的字眼…

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

本节我们主要介绍了:

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


联系我
置顶