VIP10

本课程属于：026-镜头初始结构选择方法 光学光电与激光工程 · 共 10 门相关课程，组合学习更完整。

查看所属VIP全部课程 →

← 返回所属目录咨询 / 购买

Web页面CSS/SVG缩放与交互白板开发

📚 共计 30 章节

点击此处阅读海量试读课程：100+行业、1000+细分领域

缩放基础：线性与非线性

什么是结构缩放？为什么需要缩放？核心数学原理——线性与非线性变换，建立缩放直觉。

数学核心概念

CSS 2D变换：scale() 详解

transform: scale() 语法、参数、坐标系与变换原点，掌握2D缩放核心。

CSS 3D变换：透视与scale3d

perspective、rotateX/Y/Z、scale3d 与 3D 空间构建，打造立体缩放效果。

SVG 缩放：viewBox 深度解析

viewBox 与 preserveAspectRatio 的深度解析，矢量图形自适应缩放。

Canvas 缩放：矩阵变换

ctx.scale()、ctx.translate() 与矩阵变换，像素级绘图缩放控制。

响应式缩放：clamp() 与容器查询

rem、vw/vh、clamp() 与容器查询的实战对比，现代响应式策略。

响应式容器查询

图片缩放：object-fit 与 srcset

object-fit、background-size 与 srcset 的适配策略，图片完美缩放。

字体缩放：流体排版与数学函数

视口单位、流体排版与 CSS 数学函数，实现字号平滑缩放。

动画缩放：rAF 与 transition 取舍

requestAnimationFrame 与 CSS transition/animation 的性能取舍，流畅动画。

缩放与性能：GPU 加速

重排、重绘、合成层与 GPU 加速，优化缩放渲染路径。

缩放与交互：滚轮与手势

鼠标滚轮缩放、双指手势与触摸事件，自然交互体验。

缩放与坐标映射：逆矩阵

屏幕坐标、世界坐标与逆矩阵，精确坐标转换。

缩放与布局：Flexbox & Grid

Flexbox、Grid 在缩放场景下的表现，布局弹性与缩放兼容。

缩放与可访问性：WCAG

WCAG 标准、用户偏好与缩放限制，包容性设计实践。

无障碍标准

响应式图片：picture 与 WebP

picture 元素、image-set 与 WebP，自适应图片缩放方案。

Canvas 高清屏适配

devicePixelRatio 与物理像素，Canvas 高清缩放显示。

SVG 图标缩放与 currentColor

currentColor、矢量缩放与图标系统，灵活图标缩放。

地图缩放：Leaflet 与瓦片

Leaflet/OpenLayers 的缩放层级与瓦片加载，地图交互缩放。

数据可视化：D3.js 缩放行为

D3.js 的缩放行为与 zoom 事件，数据驱动缩放。

游戏开发：相机缩放与视口

Phaser/Three.js 的相机缩放与视口管理，游戏场景缩放。

WebGL：投影与纹理缩放

投影矩阵、视口变换与纹理缩放，3D 渲染缩放核心。

iframe 缩放与自适应

内嵌内容的缩放与自适应方案，跨域缩放技巧。

打印缩放：@page 与 print

@page 规则、缩放打印与 CSS print 媒体，纸质输出缩放。

暗黑模式与主题缩放

CSS 自定义属性与主题缩放，暗黑模式下的缩放适配。

微前端：子应用缩放与沙箱

子应用缩放、沙箱隔离与样式冲突，微前端缩放实践。

微前端沙箱

低代码平台：拖拽缩放与吸附

拖拽缩放、网格吸附与比例锁定，低代码编辑器缩放。

低代码拖拽

测试：视觉回归与像素对比

视觉回归测试、像素对比与自动化截图，缩放质量保障。

测试自动化

构建工具：PostCSS 与兼容性

PostCSS、autoprefixer 与缩放兼容性，工程化缩放方案。

设计系统：间距与组件缩放

间距缩放、组件缩放与设计 Token，系统化缩放体系。

设计系统Token

综合实战：可缩放白板应用

构建一个可缩放的白板应用（缩放、平移、标注），全流程实战。