本课程探索响应式设计的方方面面。了解如何制作外观精美且对每个人都适用的网站。
本课程将带您踏上现代响应式 Web 设计的诸多方面的旅程。前几个模块将通过响应式设计的历史以及响应式布局的基础知识轻松引导您入门。从那里,您将学习响应式图片、排版、无障碍功能等。
在此过程中,您将了解如何使网站响应用户偏好和设备功能。到最后,您还将了解响应式设计的未来发展方向。
每个模块都有演示和自我评估,供您测试您的知识。
本课程专为初级和中级设计师和开发者创建。对 HTML 和 CSS 的基本了解就足够了。您不需要了解任何 JavaScript。如果您是网站制作的完全新手,我们提供了 HTML 简介 和另一个课程来帮助您学习 CSS。
您将学到以下内容
简介
了解响应式设计的起源。
媒体查询
使用 CSS 媒体查询使您的设计适应不同的屏幕尺寸。
国际化
为不同的语言和书写模式准备您的设计。
宏观布局
使用多种 CSS 技术设计页面布局。
微观布局
构建可以放置在任何位置的灵活组件。
排版
使您的文本清晰美观,无论它出现在哪里。
响应式图片
为您的访问者提供最适合其设备和屏幕的图片。
picture 元素
对您的图片进行更具创意的控制。
图标
使用 SVG 实现可缩放的响应式图标。
主题化
调整您的设计以匹配用户偏好,例如深色模式。
无障碍功能
确保您的网站对所有人可用。
互动
为不同的输入机制(鼠标、键盘和触摸)准备您的页面。
用户界面模式
考虑一些适应不同屏幕尺寸的常见 UI 元素。
媒体功能
全面了解媒体功能让您响应设备和偏好的所有方式。
屏幕配置
为具有多个屏幕的设备准备您的内容。
结论与后续步骤
更多资源可帮助您迈出下一步。
那么,您准备好学习响应式设计了吗?