欢迎学习自适应设计!

一门探索自适应设计方方面面的课程。了解如何制作美观且适合所有人的网站。

本课程将带您了解现代响应式网页设计的方方面面。 借助前几个单元,您将了解自适应设计的起源历史,并学习自适应布局的基础知识。 您将了解自适应图片、排版、无障碍功能等。

在此过程中,您将了解如何让网站能够根据用户偏好和设备功能做出响应。 学完本课程后,您将了解自适应设计的未来发展方向。

每个单元都有演示和自我评估,大家可以检验自己对知识的掌握情况。

本课程面向初级和中级设计师和开发者。 对 HTML 和 CSS 有基本的了解应该就足够了。 您无需了解任何 JavaScript。 如果您是第一次构建网站,请参阅 HTML 简介和另一门可帮助您学习 CSS 的课程。

您将学习以下内容:

简介

了解自适应设计的灵感来源。

媒体查询

使用 CSS 媒体查询调整您的设计,以适应不同的屏幕尺寸。

国际化

针对不同语言和书写模式准备好设计。

宏布局

使用选择的 CSS 技术设计页面布局。

微布局

构建可放置在任何位置的灵活组件。

排版

无论文字位于何处,都要使其清晰易读、美观。

自适应图片

为访问者提供最适合其设备和屏幕的图片。

图片元素

对图片进行更具创意的控制。

图标

使用 SVG 可缩放自适应图标。

主题

调整您的设计,以迎合用户偏好,例如深色模式。

无障碍功能

确保所有人都能访问您的网站。

交互

为不同的输入机制(鼠标、键盘和触摸)准备好网页。

界面模式

请考虑一些常见的界面元素,这些元素可适应不同的屏幕尺寸。

媒体功能

概要介绍了媒体功能可让您根据设备和偏好设置做出响应的所有方式。

屏幕配置

准备好适用于具有多个屏幕的设备的内容。

总结和后续步骤

有助于您采取后续步骤的其他资源。

那么,准备好学习自适应设计了吗?