17个非常有用的响应式网页设计教程

响应式网页设计现在比以往任何时候都更容易实现,因为有很多很棒的工具可以帮助您创建和测试您的设计,并确保您创建最好的用户体验。以下是我们对一些最佳资源的综述,这些资源将指导您使您的网站在任何设备上都运行良好并且看起来很棒。

01. 响应式网页排版的规则

The rules of responsive web typography

请遵循以下提示,以获得正确的响应式网页排版

响应式网页排版很难 - 你需要有设计印章和技术诀窍。但无论多么棘手,错误都不是一种选择,因为排版是网页设计的基石。遵循这些设计原则和实用的解决方案,使其正确。

02. 使用基于em的大小设计响应式网站

Design a responsive site with em-based sizing

构建您的页面,以便在字体大小更改时设计不会中断

通过使用em单位进行字体大小调整,您可以在页面上设计组件,以便在字体大小更改时自动响应。然后,通过巧妙的技巧来响应字体大小,您可以生成一个基于浏览器视口宽度动态调整的整个页面。了解如何利用ems的“相对”行为来创建可扩展且响应迅速的设计。

03. 优先级指南:内容优先于线框的替代方案

Priority guides: a content-first alternative to wireframes

了解为什么要使用优先级指南而不是线框

线框可能是用于设计网站,应用程序和其他数字接口的最广泛使用的工具,但它们并非没有缺点,特别是在响应式设计方面。在这里,Heleen van Nues和Lennart Overkamp介绍了他们首选的线框替代方案:优先级指南,其中包含移动屏幕的内容和元素,按层次从上到下排序,没有布局规范。

04. 专业人士的响应式网页设计指南

The pro's guide to responsive web design typographic title

使用本指南为任何设备构建更好的站点

写的贾斯汀艾弗里响应式设计周刊的策展人,来自网络杂志的这本指南将网络专业人士从基础知识转向更高级的响应式网页设计技术。

05. 如何设计响应式和设备无关的表单

Responsive forms adapting to different devices' screens

无论设备如何,请确保您的表单有效

表单是任何数字产品设计中最重要的元素之一,无论您需要注册流程还是多视图步进器,您都需要对其进行设计,以便在移动设备上以及桌面上有效地工作。以下是如何操作,并提供有关如何使用Flexbox的有用提示。

06. 使用CSS Grid创建响应式布局

Designer creating a CSS Grid website

构建一个适合所有视口的漂亮的投资组合网站

CSS Grid Layout每天都在浏览器支持中不断增长,虽然它不是Flexbox的替代品,甚至不是浮动的替代品,但与它们结合使用时,它是创建新的令人兴奋的响应式布局的好方法。按照此分步指南,使用Grid构建响应式投资组合站点。

07. Flexbox的网页设计师指南

Flexbox columns marked 1 2 3 4 5 with an arrow showing the main axis is horizontal

开始使用Flexbox

你开始使用Flexbox了吗?在本教程中,Wes Bos提供了核心概念的综合指南,使您可以深入了解掌握这一强大工具所需的一切。

08. Codrops Flexbox参考

Codrops screenshot says 'Flexbox, or the Flexible Box Layout, is a new layout mode in CSS3 designed for laying out complex applications and web pages'

Sara Soueidan的完整指南

Flexbox的完整指南由Sara Soueidan撰写,Sara Soueidan以其能够以一种易于理解而无需细节的方式解释概念的能力而闻名。 Codrops指南定期更新,因此它是您需要时返回的绝佳资源。

09. 堆栈:Flexbox For Sketch

Medium article screenshot says 'Auto-Layout: Introducing Stacks  - Flexbox for Sketch'

在Sketch中获取Flexbox功能

Stacks是Auto Layout插件的一部分,为您提供了一种在Sketch中使用Flexbox技术的方法,而无需使用CSS。本文将介绍如何利用这种强大的技术实现轻松的响应式设计。

10. 技术RWD的速成课程

A crash course in technical responsive web design screenshot

掌握响应式网页设计的基础知识

在树屋博客上写作,Jerry Cao将大量有用的信息浓缩成一篇相对简短易读的文章。

11. 使用Susy和Breakpoint创建灵活的布局

Device screens showing responsive website layout adapted to each ratio

Sass扩展来处理响应式数学

如果您不想使用框架来构建响应式网站,那么这些Sass扩展是一个不错的选择,每个都有自己的优势。他们将为您处理响应式数学,以便您可以专注于设计。

12. 如何在Adobe XD中创建响应式指南

Responsive guides being made in Adobe XD

Adobe Experience Design(XD)是一个用户体验和原型设计工具

如果你热衷于尝试Adobe体验设计(XD),这是一个很好的教程,可以帮助您入门。它包括一个视频演示,可以引导您完成整个过程的每次点击。

13. BBC体育的CSS

Screenshot of BBC Sport website

适用于大型响应式网站的轻量级CSS

这本身并不是教程,但这里有很多学习内容。在这篇文章中,前两个系列中的第一个,前端开发人员Shaun Bent带我们详细了解了如何在BBC Sport上完成CSS。他们设法将这个庞大网站的CSS基础保持在9kb以下,并且看到它是如何完成的,这很有意思。

CSS Tricks screenshot starting the article with 'The purpose of a sticky footer is that it "sticks" to the bottom of the browser window'

Chris Coyier的粘性页脚方式

粘性页脚......应该足够简单吧?不幸的是。它可能比你想象的那样比每个设备上的正确位置更加棘手。幸运的是,Chris Coyier已经制定了五个技巧,可以帮助你实现这一目标计算值(),Flexbox,负边距和网格。

15. 适应输入

Table showing comfortable, cozy and compact text designs on different screen sizes

确保您的响应式网站可以接受来自任何类型设备的输入

响应式设计不仅仅是让您的页面在任何设备上正常显示,还必须使其正常运行 - 这意味着它必须善于接受在台式机具有触摸屏和手机具有键盘的世界中的输入。 Cloud Four的Jason Grigsby撰写的这篇文章有一些合理的建议。

16. 我们的最佳做法是杀死移动网络性能

Screenshot of article reading 'Web performance rules invented for desktop web access need to be revised for the mobile era.'

性能考虑因素也需要适用于移动设备

在不考虑的情况下应用,在桌面时代构思的某些最佳实践可能会对移动Web性能产生不利影响。本文将让您更深入地思考如何让您的网站在移动设备上正常运行。

17. 如何使用容器查询制作响应式Web应用程序

Screens of different dimensions showing a web app mockup scaling

了解如何使用容器查询进行媒体扩展

了解如何使用容器查询在不同维度和分辨率下转换美丽,复杂的Web应用程序 - 包含组件,状态和交互。

相关文章:



翻译字数超限