完整的官方Bootstrap 5设计系统-不含代码

Bootstrap是最流行的CSS框架，用于开发响应性和移动优先的网站。今天的分享是一个近乎完整的Bootstrap 5设计系统。这个设计系统是用Figma中的Auto Layout和Variants构建的。因此，每件组件都支持响应式设计，屏幕最小为320像素。
[……]

阅读全文 »

响应式网页设计时代

如果你和我一样一直在网页设计行业，你知道一件事即将发生，唯一不变的就是变化。大约每10年，我们做事的方式就会发生根本性的转变，这对于超越我们之前所做的事情至关重要……我们即将再次跨入下一个阶段。[……]

阅读全文 »

一套设计稿多端适配：电脑、手机、平板和车机

前几天优酷小伙伴告诉我，他们现在做方案，基本上只产出一套设计稿了，无论是iPad、安卓大屏、电脑或者是车机，全部通过响应式设计搞定。

本来还不信来着，毕竟iPad屏幕尺寸跟手机也差太远了吧，一个[……]

阅读全文 »

响应式布局测试工具，比Chrome自带的扩展更好用

现在智能手机和平板不断更新，分辨率也随着增多，导致测试响应式的网页布局越来越困难，如果用Chrome浏览器自带的扩展程序来测试，每检测一个分辨率就要去选择一次，10个设备就要选择10次，这样来回是很麻[……]

阅读全文 »

贝壳找房的响应式网页布局设计

响应式网页布局设计已经成为互联网的主流标准。让网页适应从桌面到手机的不同大小、不同分辨率的屏幕，从而为用户提供更好的体验。本文以贝壳找房为例，在贝壳找房原有的网页基础上，结合目前的设备屏幕趋势和业务的[……]

阅读全文 »

Material Design 之响应式栅格布局

Material Design 响应式布局栅格适应屏幕尺寸和方向，确保布局的一致性。[……]

阅读全文 »

使用响应式图像

自从2010年Ethan Marcotte开始讨论响应式网页设计，开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在[……]

阅读全文 »

快速测试响应式网页设计的 Chrome 扩展

测试响应式的网站可以有很多方式，比如使用之前我们介绍过的「使用Chrome浏览器模拟手机端访问网页」，又或者用在线版的「Google Resizer」，然而今天为大家分享的是使用 Chrome 扩展版[……]

阅读全文 »