大白话css第五章CSS新特性与前沿技术、跨平台与跨设备适配
大白话css第五章CSS新特性与前沿技术、跨平台与跨设备适配
1. 掌握CSS新特性与前沿技术
容器查询（Container Queries）
- 解释：以前的媒体查询是根据整个浏览器窗口的大小来改变样式，而容器查询是根据某个元素的容器大小来调整样式。就好比你有一个盒子装着东西，这个盒子变大变小了，里面东西的样式就跟着变，不用管整个房间（浏览器窗口）有多大。
- 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 定义一个容器，容器查询会基于这个容器的大小 */
.card-container {
container-type: inline-size;
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
.card {
background-color: #f0f0f0;
padding: 10px;
}
/* 当容器宽度至少为 400px 时，改变卡片样式 */
@container (min-width: 400px) {
.card {
display: flex;
align-items: center;
}
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<img src="example.jpg" alt="示例图片" width="100">
<p>这是卡片里的文字内容。</p>
</div>
</div>
</body>
</html>
在这个例子里，当 .card-container 的宽度达到 400px 及以上时，.card 里的图片和文字会水平排列；宽度小于 400px 时，就还是默认的垂直排列。
CSS 嵌套（Nesting）
- 解释：以前写 CSS 嵌套样式要写很长的选择器，现在 CSS 嵌套让你可以像写 HTML 嵌套结构那样写 CSS，代码更简洁，也更好理解。
- 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
nav {
background-color: #333;
/* 嵌套写法，直接在 nav 里写子元素样式 */
a {
color: white;
text-decoration: none;
padding: 10px;
&:hover {
background-color: #555;
}
}
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
</nav>
</body>
</html>
这里在 nav 选择器里直接嵌套写了 a 标签的样式，& 代表父选择器 nav a，所以 &:hover 就是 nav a:hover 的意思。
2. 跨平台与跨设备适配
响应式与自适应结合
- 解释：响应式布局是网页根据不同设备屏幕大小自动调整样式，自适应布局是针对不同设备预先做好几套固定的布局。把它们结合起来，能让网页在各种设备上都有最好的显示效果。
- 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 通用样式 */
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.item {
width: 25%;
padding: 10px;
box-sizing: border-box;
}
/* 小屏幕设备（手机），自适应布局 */
@media (max-width: 767px) {
.container {
display: block;
}
.item {
width: 100%;
}
}
/* 中等屏幕设备（平板），响应式微调 */
@media (min-width: 768px) and (max-width: 991px) {
.item {
width: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
<div class="item">项目 4</div>
</div>
</body>
</html>
在这个例子中，大屏幕下项目是四列显示；平板设备时，变成两列显示；手机设备时，变成一列显示，既利用了响应式的灵活性，又针对小屏幕做了自适应调整。
不同操作系统与浏览器适配
- 解释：不同操作系统（如 Windows、Mac、iOS、Android）和浏览器（如 Chrome、Firefox、Safari）对 CSS 的支持可能有点小差别，要做一些针对性的样式调整，保证网页在各种环境下都正常显示。
- 示例：
/* 针对 Safari 浏览器的样式调整 */
@supports (-webkit-touch-callout: none) {
/* Safari 是 iOS 系统默认浏览器，这里可以写针对 Safari 的样式 */
body {
/* 比如调整字体渲染 */
-webkit-font-smoothing: antialiased;
}
}
/* 针对 Firefox 浏览器的样式调整 */
@-moz-document url-prefix() {
/* 这里写针对 Firefox 的样式 */
input[type="text"] {
/* 调整输入框样式 */
border: 1px solid #bbb;
}
}
3. 性能极致优化与维护
代码压缩与合并
- 解释：把 CSS 文件里多余的空格、换行符去掉，还可以把多个 CSS 文件合并成一个，这样能减少浏览器请求文件的次数，加快网页加载速度。
- 示例：
假设有两个 CSS 文件：
style1.css
body {
font-family: Arial, sans-serif;
}
style2.css
h1 {
color: #333;
}
合并压缩后变成：
body{font-family:Arial,sans-serif}h1{color:#333}
减少重排与重绘
- 解释：重排就是浏览器重新计算元素的位置和大小，重绘就是重新绘制元素的外观。频繁的重排和重绘会让网页变慢，所以要尽量减少。比如一次性修改元素的多个样式，而不是一个一个改。
- 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.new-style {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<script>
const box = document.getElementById('myBox');
// 一次性添加新样式类，减少重排重绘
box.classList.add('new-style');
</script>
</body>
</html>
这里通过一次性添加 new-style 类，而不是分别修改 width、height 和 background-color，减少了重排和重绘的次数。
用代码示例介绍如何使用CSS变量？
咱先来说说啥是 CSS 变量。CSS 变量就像是给一个特定的样式值取了个名字，以后想用这个值的时候，直接喊这个名字就行，不用每次都重复写那个具体的值。这样一来，要是哪天你想改这个值，只需要在定义名字的地方改一次，所有用这个名字的地方都会跟着变，特别方便。
1. 定义 CSS 变量
咱们先看看怎么定义 CSS 变量。一般我们会把变量定义在 :root 里面，:root 就相当于整个网页的“老大”，在这儿定义的变量，整个网页都能用到。
:root {
--main-color: #ff6600; /* 定义一个叫 --main-color 的变量，值是橙色 */
--font-size-big: 24px; /* 定义一个叫 --font-size-big 的变量，值是 24 像素 */
}
在上面的代码里，--main-color 和 --font-size-big 就是我们定义的变量。变量名前面必须有两个短横线 --，后面冒号跟着的就是变量的值。
2. 使用 CSS 变量
定义好变量后，怎么用呢？这就得用到 var() 这个东西啦。var() 就像是一个“传话员”，能把变量的值“传”到需要的地方。
body {
color: var(--main-color); /* 把 body 里面文字的颜色设置成 --main-color 变量的值，也就是橙色 */
font-size: var(--font-size-big); /* 把 body 里面文字的大小设置成 --font-size-big 变量的值，也就是 24 像素 */
}
h1 {
background-color: var(--main-color); /* 把 h1 标题的背景颜色设置成 --main-color 变量的值，还是橙色 */
}
在这段代码里，var(--main-color) 就代表我们之前定义的橙色，var(--font-size-big) 就代表 24 像素。这样写是不是比每次都写具体的颜色代码和像素值方便多啦？
3. 完整的 HTML 和 CSS 示例
下面是一个完整的例子，把 HTML 和 CSS 结合起来，看看实际效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
--main-color: #ff6600;
--font-size-big: 24px;
}
body {
color: var(--main-color);
font-size: var(--font-size-big);
}
h1 {
background-color: var(--main-color);
color: white;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段正文内容。</p>
</body>
</html>
在这个例子里，网页的标题背景颜色和正文文字颜色都会是橙色，标题文字是白色，正文文字大小是 24 像素。要是你哪天想把橙色换成蓝色，只需要把 :root 里 --main-color 的值改成蓝色的代码，比如 #0066ff，整个网页里用到 --main-color 的地方就都变成蓝色啦。
4. 变量的作用域
CSS 变量也有自己的“地盘”，也就是作用域。在 :root 里定义的变量，整个网页都能用，这是全局变量。但你也可以在某个具体的元素里定义变量，这样这个变量就只能在这个元素和它的“孩子”元素里用，这就是局部变量。
:root {
--global-color: green; /* 全局变量，整个网页都能用 */
}
article {
--local-color: purple; /* 局部变量，只能在 article 元素和它里面的元素用 */
}
body {
color: var(--global-color); /* 用全局变量，文字颜色是绿色 */
}
article p {
color: var(--local-color); /* 用局部变量，article 里面的段落文字颜色是紫色 */
}
在这个例子里，--global-color 是全局变量，body 元素能用；--local-color 是在 article 里定义的局部变量，只有 article 里面的 p 元素能用。
5. 给变量设置默认值
有时候，变量可能没定义，这时候可以给 var() 传个默认值，万一变量不存在，就用这个默认值。
div {
background-color: var(--maybe-not-defined, lightgray); /* 如果 --maybe-not-defined 没定义，背景颜色就是浅灰色 */
}
在这个例子里，要是 --maybe-not-defined 这个变量没定义，div 的背景颜色就会是浅灰色。
通过这些例子，你应该对 CSS 变量的使用有个大概的了解啦，以后写 CSS 代码的时候，就可以试试用变量，让代码更简洁、更好维护。
响应式布局的由来与发展
响应式布局的由来
在互联网发展的早期，大家主要用电脑访问网页，而且电脑屏幕尺寸差异不大。所以那时候做网页布局很简单，就按照固定的宽度和高度来设计，所有内容都在这个固定的“框框”里显示得整整齐齐。
可后来科技发展太快啦，各种设备都冒出来了，像手机、平板，它们的屏幕大小和电脑完全不一样，有大有小，比例也各不相同。要是还沿用以前固定宽度的布局，在手机或者平板上看网页就会出大问题。比如内容显示不全，字小得像蚂蚁，得不停地缩放和滑动屏幕才能看清；或者布局全乱套了，该在左边的跑到右边，该在上面的跑到下面，用户体验差得没法说。
举个例子，一个在电脑上看着特别规整的电商网站，商品图片、价格、介绍都排列得很好。但在手机上打开，可能图片变形，文字挤成一团，根本没法好好浏览商品。为了让用户不管用啥设备都能舒服地看网页，响应式布局就被发明出来啦。它能让网页根据不同设备的屏幕大小、分辨率自动调整布局和样式，就像给网页装了个“智能脑袋”，能自己适应各种环境。
响应式布局的未来发展趋势
更智能的自适应
以后的响应式布局会更聪明，它不只是根据屏幕大小调整，还能根据设备的特性和用户的使用习惯来变。比如说，当你用智能手表打开网页，它能自动识别手表屏幕小、触摸操作的特点，把网页内容变得简洁又好操作，让你点几下就能找到想要的信息。
与新兴技术结合
和人工智能、虚拟现实这些新技术结合得更紧密。比如在虚拟现实环境里浏览网页，响应式布局能根据你的视角和动作，实时调整网页的显示，给你特别沉浸式的体验。要是你戴着 VR 眼镜看新闻网页，当你转头或者靠近屏幕，新闻内容的布局和显示方式会自动改变，就像真的在一个立体的新闻空间里一样。
无障碍访问优化
会更加注重无障碍访问设计，让有残疾的人也能轻松使用。比如对于视力不好的人，网页能自动调整文字大小、颜色对比度，还能提供语音朗读功能；对于行动不便只能用键盘操作的人，能优化焦点样式和操作流程，让他们也能流畅地浏览网页。
用代码实现响应式布局
1. 使用媒体查询
媒体查询就像是个“魔法开关”，能根据不同的屏幕尺寸应用不同的 CSS 样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 让网页在移动设备上正确显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 全局样式，所有设备都适用 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 导航栏样式 */
nav {
background-color: #333;
display: flex;
justify-content: space-around;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
}
/* 主体内容样式 */
.content {
padding: 20px;
}
/* 小屏幕设备（手机） */
@media (max-width: 767px) {
nav {
/* 导航栏变成垂直排列 */
flex-direction: column;
align-items: center;
}
.content {
font-size: 14px;
}
}
/* 中等屏幕设备（平板） */
@media (min-width: 768px) and (max-width: 991px) {
nav {
/* 导航栏居中排列 */
justify-content: center;
}
.content {
font-size: 16px;
}
}
/* 大屏幕设备（电脑） */
@media (min-width: 992px) {
nav {
/* 导航栏均匀分布 */
justify-content: space-around;
}
.content {
font-size: 18px;
}
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
</nav>
<div class="content">
<p>这是网页的主体内容，会根据不同设备屏幕大小调整样式哦。</p>
</div>
</body>
</html>
在这个例子里，我们用 @media 定义了不同的屏幕尺寸范围，然后在每个范围里修改导航栏和内容的样式。比如在小屏幕（手机）上，导航栏从水平排列变成垂直排列，内容字体变小。
2. 使用弹性布局（Flexbox）
Flexbox 能让元素在容器里灵活排列和伸缩。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 容器样式 */
.container {
display: flex;
/* 允许元素换行 */
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
/* 子元素样式 */
.item {
width: 200px;
background-color: #f0f0f0;
padding: 20px;
margin: 10px;
}
/* 小屏幕设备（手机） */
@media (max-width: 767px) {
.item {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
<div class="item">项目 4</div>
</div>
</body>
</html>
这里我们用 display: flex 把 .container 变成弹性容器，里面的 .item 元素会自动排列。在小屏幕上，通过媒体查询让每个 .item 元素宽度变成 100%，实现垂直排列。
3. 使用网格布局（Grid）
Grid 可以创建二维的网格结构，让元素在网格里定位。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 网格容器样式 */
.grid-container {
display: grid;
/* 初始三列布局 */
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
/* 网格项样式 */
.grid-item {
background-color: #f0f0f0;
padding: 20px;
}
/* 小屏幕设备（手机） */
@media (max-width: 767px) {
.grid-container {
/* 变成一列布局 */
grid-template-columns: 1fr;
}
}
/* 中等屏幕设备（平板） */
@media (min-width: 768px) and (max-width: 991px) {
.grid-container {
/* 变成两列布局 */
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">项目 1</div>
<div class="grid-item">项目 2</div>
<div class="grid-item">项目 3</div>
<div class="grid-item">项目 4</div>
<div class="grid-item">项目 5</div>
<div class="grid-item">项目 6</div>
</div>
</body>
</html>
在这个例子中，我们用 display: grid 创建了一个网格容器，通过 grid-template-columns 定义列的布局。然后根据不同屏幕尺寸，用媒体查询改变列的数量，实现响应式布局。