1.起始
夜晚, 万物寂静, 月色顺着窗台洒在兄弟柔美的睡脸上
经过剧烈的运动(指健身举铁), 兄弟已经熟睡, 此时我却睡不着, 想着白天老板给的任务, 不由的泛起忧愁, 忍不住拍醒正熟睡的兄弟
睡不着, 老板给我的需求好难
兄弟揉了揉眼睛, 坐起身来
没事, 有我呢, 什么需求和我说说
听到他温柔的话语, 我一股脑的倾诉自己的烦恼, 叽里呱啦说了一大堆, 其中包含, 移动端, pc端, 适配, 什么的词, 兄弟听后微微一笑:
这简单呀
在我期待的目光中他缓缓掏出自己的 大 机 器 : **** 笔记本电脑(这里适合做植入), 并且打开 mdn 开始搜索 媒体查询
你知道 媒体查询 吗
什么人体? 训啥?
兄弟没回答我的疑问, 只是轻轻指着屏幕上的表述
2.简介
你看这段, 这是 mdn上对媒体查询的描述
简单来说, 他可以将css分成一个一个满足特定条件才可以触发的代码块
这里是简单的代码示例:
@media (min-width: 900px) {
div {
background-color: #f00;
}
}
经过兄弟的提点我好像突然有些顿悟, 忍不住大声喊起来
是不是像是 if else 一样?
兄弟没多理我, 只是自顾自的说:
之前说了是要满足特定条件才能触发的块,以上代码需要满足什么条件呢?
我不道啊--
我一脸懵逼的看着他
兄弟看着我迷茫的样子, 无奈的翻了翻白眼
看这里 (min-width: 900px) 这个表示视口的宽最小 900px, 也就是视口宽在 900px 以上时触发代码块里 css 属性
说完兄弟就满怀期待的看着我
看明白没
我有些不敢直视他的目光
也许, 大概, 可能, 梅币, 是明白了
那么这 () 里还有那些可以判断条件可以写呢
我不--呜呜--
我刚想说话兄弟就用细长的手指, 轻轻按住我的嘴唇
以下我给你简单的罗列一下
3.媒体特性
-
width:视口的宽(包括滚动条)语法:
(width: 900px),这代表视口宽满足900px时将应用该css代码块
也可以用关系运算符来表示一个范围,示例如:(width< 900px)
表示视口宽小于900px时将应用代码块
也有最大值,最小值的写法min-width,max-width -
height:视口的高(包括滚动条) 与上面类似这里略过 -
orientation:视口的旋转方向关键字值:
portrait:viewport 处于纵向，即高度大于等于宽度
landscape:viewport 处于横向，即宽度大于高度。
语法:(orientation: landscape) -
resolution:输出设备的像素密度（分辨率）语法
(resolution: 150dpi)
其实以上已经可以满足你在很多场景下使用了,但有些复杂的逻辑就需要更多条件的组合,这时候逻辑运算符就派上用场了
什么是逻辑运......
我还没说完兄弟的脸在我眼前逐渐放大! 鼻子顶住我的鼻子,平静的望着我
憋说话了, 认真听
好好好, 我瞬间小鸡啄米般疯狂点头
4.逻辑运算符
概述: 逻辑运算符（logical operator）not、and、only 和 or 可用于联合构造复杂的媒体查询，你还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。
-
and:字面意思, 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为 true，它还用于将媒体特性与媒体类型结合在一起。语法
(width< 900px) and (height>200px)意思是当宽小于900px并且 高大于200px时将应用该代码块,类似与逻辑运算符&& -
,（逗号）:逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为 true，则整个媒体查询语句返回 true。换句话说，列表的行为类似于逻辑或（or）运算符。语法
(width< 900px) , (height>200px)意思是当宽小于900px或者 高大于200px时将应用该代码块,类似于逻辑运算符的|| -
or:等价于,运算符。语法
(width< 900px) or (height>200px)与上述一样
差不多这些就够用了, 还有什么不懂的吗?
我刚想点头, 看着兄弟笑眯眯的表情, 想说的话突然都噎住了, 我轻轻摇了摇头
没有了, 没有了
兄弟笑着摸了摸我的头, 温柔的说
懂了就好, 夜色深了咱们快点睡吧
兄弟温柔的声音让我不忍拒绝, 于是关上了灯, 与他睡下了
