前端学习记录~2023.7.18~CSS杂记 Day10 媒体查询入门 & 传统布局方法 & 支持旧浏览器

---

前言

由于有很多知识非常符合直觉或者和其他语言有通用性，因此个人觉得不需要全部记下来，本篇只记录一些个人觉得需要注意或单独记忆的知识点。

本篇涉及媒体查询入门、传统的布局方法和支持旧浏览器

不出意外本篇会是 CSS 的最后一篇

---

一、媒体查询入门指南

CSS 媒体查询可以达成这种目标，就是仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用。

媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其他条件，比如用户是在使用触摸屏还是鼠标。

1、媒体查询基础

最简单的媒体查询语法看起来是像这样的：

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

由以下部分组成：

• 一个媒体类型：告诉浏览器这段代码是用在什么类型的媒体上的
• 一个媒体表达式：是一个被包含的 CSS 生效所需的规则或者测试
• 一组 CSS 规则：会在测试通过且媒体类型正确的时候应用

备注：媒体类型是可选的，如果没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型。

（1）媒体类型

可以指定的媒体类型有：

• all
• print
• screen
• speech

例如下面的媒体查询将会在页面被打印的时候把 body 设定为只有 12pt 大小。当页面在浏览器中载入的时候，它将不会生效:

@media print {
	body {
		font-size: 12pt;
	}
}

（2）媒体特征规则

在指定了类型以后，可以用一条规则指向一种媒体特征

a. 宽和高

一般最常探测的特征是视口宽度，使用width、min-width和max-width媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用 CSS

这些特征是用来创建响应不同屏幕大小的布局的。例如，要想在视口正好是 600 像素的时候，让 body 的文本变为红色，你可能会使用下面的媒体查询

@media screen and (width: 600px) {
	body {
		color: red;
	}
}

width（和height）媒体特征可以以数值范围使用，于是就有了min-或者max-的前缀，指示所给的值是最小值还是最大值。这种的应用频率更高。

b. 朝向

orientation媒体特征，可以用它测出竖放（portrait）和横放（landscape）模式。

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

标准的桌面视图是横放朝向的，在这种朝向上能够表现良好的设计，在处于竖放模式的手机或平板电脑上可能不会表现得这么好。对朝向的测试可以帮你建立一个为竖放设备优化的布局

c. 使用指点设备

hover媒体特征，可以测试用户是否能在一个元素上悬浮，这也基本就是说他们正在使用某种指点设备，因为触摸屏和键盘导航是没法实现悬浮的。

@media (hover: hover) {
    body {
        color: rebeccapurple;
    }
}

如果我们知道用户不能悬浮的话，我们可以默认显示一些交互功能。对于能够悬浮的用户，我们可以选择在悬浮在链接上的时候，让这些功能可用。

pointer媒体特征：

• none：用户没有指点设备，也许是他们正只使用键盘导航，或者是语音命令
• fine：指针是类似于鼠标或者触控板的东西，它让用户可以精确指向一片小区域
• coarse：指针是你在触摸屏上的手指

使用pointer可以在用户使用屏幕时进行交互时，帮你更好地设计响应这种交互的界面。例如，如果你知道用户正在用触摸屏设备交互的时候，你可以建立更大的响应区域

2、更复杂的媒体查询

有了所有不同的可用的媒体查询，你可能想要把它们混合起来，或者建立查询列表使其中的任何一个都可以匹配生效

（1）媒体查询中的“与”逻辑

使用and来混合媒体类型和特征

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

（2）媒体查询中的“或”逻辑

如果你有一组查询，且要其中的任何一个都可以匹配的话，那么你可以使用逗号，分开这些查询。

在下面的示例中，文本会在视口至少为 400 像素宽的时候或者设备处于横放状态的时候变为蓝色。如果其中的任何一项成立，那么查询就匹配上了

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

（3）媒体查询中的“非”逻辑

使用not操作符反转整个媒体查询的含义。

在下面的例子中，文本只会在朝向为竖着的时候变成蓝色

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

3、怎么选择断点

比起使用特定的尺寸，一个更好的方法是在内容某种程度上开始变得混乱的时候，改变尺寸的设计。

引入媒体查询的点就叫做断点。

火狐开发者工具中的响应式设计模式能很好地帮助弄清楚断点应该设置在哪里。你能容易就能让视口变大和变小，然后看下可以在哪里加入媒体查询、调整设计，从而改善内容。

4、移动优先的响应式设计

可以采用两种方式实现响应式设计：

1. 从桌面或者最宽的视图开始，然后随着视口变得越来越小，加上断点，把物件挪开
2. 从最小的视图开始，随着视口变得越来越大，增添布局内容

第 2 种方式被叫做移动优先的响应式设计，很多时候是最值得仿效的做法。

5、是否真的需要媒体查询？

弹性盒、网格和多栏布局都给了你建立可伸缩的甚至是响应式组件的方式，而不需要媒体查询。这些布局方式能否在不加入媒体查询的时候实现你想要的设计，总是值得考虑的一件事。

例如，你可能想要一组卡片，至少为二百像素宽，并在主文章里尽可能多地放下这些二百像素的卡片。这可以用网格布局实现，而完全不使用媒体查询。

6、媒体查询章节总结

对媒体查询这章节的建议就是，你可能根本不需要它！但是，实践中你会发现，由媒体查询改进的现代布局方式的恰当使用，将会产生最佳效果。

---

二、传统的布局方法

本节主要涉及的就是早期或者旧项目会涉及到的一些知识，目前用不到，可以在需要时查看MDN关于传统的布局方法的介绍

---

三、支持旧浏览器

本文中，我们推荐使用弹性盒和网格作为你的设计的主要布局方式。但是，你的网站的访客会有人使用旧浏览器，或者是不支持你已经使用的方式。这总是 Web 上存在的情况，因为新的特性被开发出来，不同的浏览器会优先支持不同的特性。本文解释了如何使用现代的 Web 技术，而无需让采用旧技术的用户被拒之门外

这块也在回头涉及兼容性时查看MDN上关于支持旧浏览器的详细介绍吧

---

总结

本篇是 CSS 篇的最终章