响应式设计 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

响应式设计话题

首页
设计文章
响应式设计

想做响应式测试？试试这个超好用的在线测试神器！

神器推荐

想做响应式测试？试试这个超好用的在线测试神器！

本文介绍的神器可以协助开发者测试网页在移动设备、平板电脑的呈现效果，内建一些常见设备的屏幕尺寸比例，也可自订大小或横向显示。

2021/07/16

Lyft设计总监：移动端响应式设计的高效方法

UI

Lyft设计总监：移动端响应式设计的高效方法

约束布局是定义控制应用中内容的规则。这些规则通过使用统一的元素和间距，保持跨平台、跨环境和跨屏幕大小的一致性。通常应用在 iOS 和 Android 中。

2021/07/14

响应式设计

B 端响应式界面应该怎么做？这篇教程超详细！

UI

B 端响应式界面应该怎么做？这篇教程超详细！

本文从B端的响应式概念、响应式规则解析和响应式使用建议三个方面，帮你完整掌握B端响应式界面设计。

2021/01/27

用一篇文章，帮你看懂网页响应式布局原理

UI

用一篇文章，帮你看懂网页响应式布局原理

本文从响应式页面是什么、响应式布局的规则、响应式的设计流程三个方面，帮你彻底掌握网页的响应式设计原理。

2020/08/20

腾讯出品！超实用的响应式设计技巧

UI

腾讯出品！超实用的响应式设计技巧

本文梳理了响应式设计的方法流程，记录问题与思考，帮助以后类似的项目开展更快。

2020/07/30

这份上万字的指南，帮你学会用栅格系统构建响应式设计

UI

这份上万字的指南，帮你学会用栅格系统构建响应式设计

在响应式设计中使用栅格系统是非常重要的，但实际项目中栅格系统到底怎么样运用呢？用一篇万字干货帮你掌握，如何利用栅格系统构建优秀的响应式设计。（文末附作者绘制的 5 套栅格系统库福利~）

2020/04/02

可能是最容易看懂的响应式知识科普

网页

可能是最容易看懂的响应式知识科普

本篇文章希望能通过简单明了的文字及图文介绍，对我们设计响应式网站时经常会出现的问题进行清晰的说明。

2019/11/19

超全面总结！如何利用栅格系统做响应式设计？

UI

超全面总结！如何利用栅格系统做响应式设计？

@UX-BOY ：本文主要与大家分享如何利用栅格系统完成后台页面响应式设计，介绍响应式设计的思路与方法。一、什么是响应式？按照本人自己的理解，响应式就是通过合理的设计方案配合规范的技术实现策略，使同一个 Web页面在各个终端（设备）不同分辨率屏幕上都能有最佳的用户体验。

2018/10/04

后台产品设计

酷站两连发！收录日本都市图片素材库+响应式在线预览网站

酷站推荐

酷站两连发！收录日本都市图片素材库+响应式在线预览网站

编者按：今天给大家推荐两个网站。一个是专门收录日本几个大城市街景为主的图库网站，可以自由使用于个人或非商业用途。另一个是用来检视自适应设计的免费在线工具。

2017/11/05

响应式网页设计

这些响应式网页测试工具确保你的设计万无一失

前端开发

这些响应式网页测试工具确保你的设计万无一失

响应式设计几乎是当代网页设计的基础构成之一。在实际设计和开发的过程中，想要让网站按照设计响应不同尺寸屏幕，设计师和前端需要花费相当的时间来进行测试和优化。所以，今天我们搜集了7款功能强大的响应式页面测试工具，下面就一一介绍一下。

2017/10/25

超全面！移动端响应式的7种UI布局解析

教程

超全面！移动端响应式的7种UI布局解析

Tony（作者）：响应式 UI能够使我们设计的元素在任何大小屏幕尺寸能够灵活适配，保证布局和体验的一致性。毫无疑问，响应 UI 设计对于现今碎片化的屏幕是非常重要的，它能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式，断点其实就是媒体查询值。比如我们平时做的 Phone 和 Pad 的适配就是通过设定断点来让程序读取对应的布局（断点设定可以根据屏幕分辨率或者屏幕尺寸），今天就和大家聊聊一些常用的响应式 UI 模式常用的布局模式流线布局等比缩放拓展布局分栏布局流动布...

2017/09/04

跨屏幕的响应式设计，你需要这样来设计用户体验

教程

跨屏幕的响应式设计，你需要这样来设计用户体验

现在的响应式的设计已经很成熟了，一整套设计方案，小到智能手表的屏幕，大到电视显示屏，还兼顾到更普遍存在的智能手机、平板和电脑屏幕。在很多人看来，跨屏幕的响应式设计，只是一套内容调整大小就可以“适配”了，但实际上，它所牵涉到的因素非常的复杂：设计师需要通过设计让内容在不同的平台上体验最大化，确保让用户在任何一个屏幕上看到内容的时候，会觉得这些内容就是为这个平台而设计的，而不是单纯的缩放而来。这种无缝的体验，才是跨屏幕设计的真正难点所在。

2017/07/04

浅谈思路！七个技巧帮你搞定响应式网页中的图片设计

教程

浅谈思路！七个技巧帮你搞定响应式网页中的图片设计

响应式网页设计已经是如今当之无愧的标准配置了，我们需要响应式的技术来应对日渐碎片化的屏幕尺寸，网页设计师也力图做好这件事情。而网页中的图片和图库的响应式设计，也是其中的重点难点。它们是网页中最常见，也是最直观可见的元素。

2016/09/13

响应式图片

翻天覆地！带你总结互联网设计圈这十年的巨大变迁

教程

翻天覆地！带你总结互联网设计圈这十年的巨大变迁

编者按：互联网带来的变化是翻天覆地的，这种变化不仅仅表现在它对于外部世界、对于我们生活的影响，它本身的转变则显得更加巨大。而设计领域在互联网的影响之下，变化也非常的明显，也许看了今天的总结，你也会为这种改变而惊叹。十年前的互联网，和现在非常的不一样。

2016/09/01

小心无大错！响应式网页图片库设计的九个注意事项

教程

小心无大错！响应式网页图片库设计的九个注意事项

响应式设计无疑是当前网页设计领域当中，不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题，许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来，那么响应式网站中的图片库应当如何设计呢？

2016/03/23

响应式图库

建站福利！帮你5分钟建一个响应式动态网站的Carrd

教程

建站福利！帮你5分钟建一个响应式动态网站的Carrd

让建站像搭积木一样简单！今天要介绍的 Carrd 是近期上线的免费建站服务，只要几个简单步骤就能快速设计出美观特色的响应式网站。我花了不到五分钟就做了一个优设网的简介，而且还有动态效果！

2016/03/22

腾讯干货！响应式图像终于有超赞的解决方案了！

教程

腾讯干货！响应式图像终于有超赞的解决方案了！

JACE：自从2010年Ethan Marcotte开始讨论响应式网页设计，开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？

2016/03/22

响应式图片

建站福利！提供超多HTML5+CSS3响应式网页模版免费下载的酷站

酷站推荐

建站福利！提供超多HTML5+CSS3响应式网页模版免费下载的酷站

今天介绍的HTML5 UP! 提供大量的HTML5 模版，而且这些模版都支持响应式网页设计，有了它我们就不用从无到有、从头到尾来打造一个网站，而是直接就现有的样版去做修改或调整，让建网站难度降低许多，也减少花费的时间和开支。来收！因为自适应网页设计在开发上较为繁琐，一般很少免费提供下载的网站，但 HTML5 UP! 收录一系列共 28 种网页设计，通通都是 HTML5+CSS3 并有响应式设计功能，网站采用的授权方式为 Creative Commons 姓名标示 3.0，也就是说你可以自由分享、修改...

2016/02/23

建站利器！提供超多高质量响应式网页模版的HTML5 Zero

酷站推荐

建站利器！提供超多高质量响应式网页模版的HTML5 Zero

HTML5 Zero 收录来自各个网站的网站模版资源，不过它并不是以数量取胜，而是精挑细选后的结果。在这网站上收集的模版都支持响应式网页设计，也就是能够依照不同的浏览画面尺寸，自动调整、弹性变化为适合阅读的使用体验。网站收录的模版类型除了部分能直接套用于 WordPress、Bootstrap 外，还有近期相当流行的 Material Design，也可以透过颜色、类型、标签等方式来筛选你要寻找的免费网站模版。

2016/02/13

响应式网页设计

腾讯干货！手把手带你深入学习Viewport和PX

教程

腾讯干货！手把手带你深入学习Viewport和PX

编者按：今天这篇腾讯游戏七宝同学的干货，不仅给同学们科普了绝对/相对长度单位、屏幕尺寸/分辨率/像素密度、PPI/DPI/SP/PX等一系列基础术语，还对移动页面重构最重要的知识点Viewport作了深入讲解，全程专业干货，设计师收！刚开始接触移动页面重构，是不是很迷惑应该按照多大的尺寸制作？320、640还是720？

2015/11/07

专业干货！超实用的响应式排版快速指南

教程

专业干货！超实用的响应式排版快速指南

@励定洲：无论是对于印刷、网站或是电视广告来说，排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而，“理解”和“实践”还是相差十万八千里的，特别是在网页设计中，“一个字号走天下”的想法可以歇歇了。

2015/10/12

响应式布局

设计小科普！给设计师的模块化设计新手完全入门指南

教程

设计小科普！给设计师的模块化设计新手完全入门指南

扁平化设计流行起来之后，现代简约风与之结合产生了许多视觉上以区块为主的网页设计作品。对于设计师而言，这种设计方式既时尚，又富于功能化，网站结构流畅、简单，与响应式的设计也有着天然的兼容性。这种设计趋势的出现，追根溯源就是模块化设计。

2015/08/14

优秀网页设计

省时高效！9款超实用的响应式导航插件下载

下载

省时高效！9款超实用的响应式导航插件下载

为了适应手机版的网站，网站导航都需要逐一优化，今天分享9款最新的响应式导航菜单插件，帮你节省大量时间 >>>Mmenu这个mmenu插件除了能实现手机侧边栏菜单外，它设计的2级菜单效果也很棒，就像是iPhone的设置菜单一样，可左右滑动展开。还有更多强大功能，比如为菜单加上图标，展开的方式等等。在线DEMO | 下载插件DrawerDrawer的响应式菜单带有多种不同类型的展开方式，从右边、左边、上边、固定等。

2015/05/09

响应式设计

再加速！五大技巧帮你提速响应式网页设计项目

教程

再加速！五大技巧帮你提速响应式网页设计项目

没有哪个成功的Web项目是在设计师和开发无法流畅沟通的前提下搞定的，协作才是做好项目的基础。我曾看到经验丰富的设计师和开发者因为沟通不畅和误会导致项目失败，也见过新手设计师和开发团队一起通过高效协同，做出惊艳无比的设计项目。在项目之初充分的磨合，能让项目在后续的快速迭代中更为流畅。

2015/04/30

响应式图片

实用干货！聊聊3种最常见的响应式设计问题

教程

实用干货！聊聊3种最常见的响应式设计问题

@十萬個為什麽：本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略 >>>响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。缩放、流式布局与响应式这些术语容易造成混淆，设计师常常错误地交替互用。

2015/04/30

响应式图片

布局专攻文！如何搞定响应式网页的布局设计？

教程

布局专攻文！如何搞定响应式网页的布局设计？

编者按：作为今年大热的设计趋势，响应式已然是设计师的标配技能。今天阿里的同学从响应式设计的布局类型、布局实现两方面深入讲解，有哪些实现布局的方式，该采用何种方式，都有相当专业细致的解答，不多说，来收 >>>Heyuchan ：在谈响应式布局前，我们先梳理下网页设计中整体页面排版布局，常见的主要有如下几种类型：布局类型：布局实现采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。固定布局：以像素作为页面的...

2015/03/04

响应式布局

超级干货！深聊Material Design复杂响应式设计

教程

超级干货！深聊Material Design复杂响应式设计

编者按：Material Design初出茅庐，现在大多数是试水之作，刚好近期有同学接手了一个响应式Web站点的改版设计，笔者参考Material Design总结以下三点，关于如何实现复杂响应式站点的Material Design，希望对大家有帮助。说到Material Design，有一篇强烈推荐：《重磅教程！帮你全面彻底搞定MATERIAL DESIGN的学习笔记》2011年，Gmail邮箱的按钮变得更加扁平化。

2015/02/21

Material Design

经久不衰！聊聊响应式设计的现状与趋势

教程

经久不衰！聊聊响应式设计的现状与趋势

从2012年开始到2014年，各大家对Web设计的趋势预测中，都提到响应式设计。2015年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页设计新标准的浪潮。

2015/01/04

响应式设计

步步为营！20款覆盖全面的响应式网站设计工具

酷站推荐

步步为营！20款覆盖全面的响应式网站设计工具

灵活的栅格和布局，响应式的图片和智能的CSS媒体查询，构成了响应式网页的主要特征。当用户扔下沉重的笔记本电脑拿起平板，响应式的网站能够自然而然地随之适配，掏出手机也毫无压力，图片和文字都会随着特定的屏幕和分辨率而调整，这就是它的优势。你以为这就完了？

2014/12/26

响应式设计

响应式不是万能的！教你提升响应式设计的移动性能（一）

前端开发

响应式不是万能的！教你提升响应式设计的移动性能（一）

你调整了浏览器，笑容攀上脸颊。你感到非常开心，认为自己实现了友好移动的目标。在正式讨论前，让我来预测下未来：你会失掉用户和经济效益，如果你把响应式网页作为唯一目标和唯一的解决办法。

2014/08/11

响应式设计

1/3

1
2
3
下一页
前往页

大家都在看

干货

文章 154

界面设计

文章 161

职场经验

文章 242

ICON

文章 204

用户体验

文章 888

App设计

文章 264

设计史

文章 145

设计趋势

文章 223

入门

文章 162

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号： uisdc123

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营