7. 响应式网页设计
响应式网页设计
响应式网页设计(英语:Responsive web design,通常缩写为RWD),或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面电脑显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现,减少用户进行缩放、平移和滚动等操作行为。对于网站设计师和前端工程师来说,有别于过去需要针对各种设备进行不同的设计,使用此种设计方式将更易于维护网页。采用 RWD 设计的网站使用CSS3 Media queries,即一种对 @media 规则的扩展,以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备(来源:Wiki)。
💡 快速上手
响应式网页设计是让 web 应用在所有不同的类型的设备上可以正常显示和运行。一个简单的例子就是网站在桌面 Web 浏览器和手机浏览器中都应外观和功能正常。对响应式设计的了解对于任何前端开发人员都是至关重要的
📖 学习领域和思想
- 在 freeCodeCamp 上学习 响应式网页设计原则部分.
- 媒体查询、断点
- 响应式图片
- 是你的网站具有响应式能力!
- 使用 Chrome DevTools 在不同的设备/视窗上查看你的网站。
本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。