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

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

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

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

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

响应式布局话题

首页
设计文章
响应式布局

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

UI

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

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

2020/08/20

基础小科普！3种国内外最常见的响应式栅格

教程

基础小科普！3种国内外最常见的响应式栅格

Z Yuhan : 我曾经很推崇 Material Design 的响应式栅格系统，花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。可当真正需要用到响应式这东西时，在做完竞品调研后，我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统，因为：那两张英文图表对艺术背景的设计师来说真的很难理解。你设计的产品很有可能比 Material Design 的预期更加复杂。

2017/11/27

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

教程

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

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

2017/09/04

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

教程

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

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

2016/09/13

响应式图片

前端福利！帮你搞定复杂网页布局的Flexbox相关工具

前端开发

前端福利！帮你搞定复杂网页布局的Flexbox相关工具

编者按：在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想制作一个复杂的多列布局，要做的众多浏览器的兼容一致那还是很复杂的。

2016/04/18

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

教程

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

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

2015/11/07

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

教程

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

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

2015/10/12

响应式布局

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

教程

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

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

2015/08/14

优秀网页设计

太实用！15组展示响应式作品的优质模板免费下载

下载

太实用！15组展示响应式作品的优质模板免费下载

编者按：绝对值得收藏！响应式网站是大势所趋，今天这组模板，可以非常方便地展示你的网站作品，全都附有笔记本、台式机、平板和手机的模板，建议马克下，以后一定会用到的 >>>Responsive Showcase PSDApple Device Wireframe MockupsResponsive Showcase Device MockupFlat Responsive Showcase PSD Vol.2Flat Devices MockUpsResponsive Showcase...

2015/05/05

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

教程

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

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

2015/04/30

响应式图片

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

教程

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

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

2015/04/30

响应式图片

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

教程

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

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

2015/03/04

响应式布局

百变随心！35款兼容性极佳的响应式网页排版设计

酷站推荐

百变随心！35款兼容性极佳的响应式网页排版设计

响应式网页设计有多火咱就不在此赘述了。但是要做好响应式设计，让网页在每一块屏幕上都能正常地显示并拥有良好的版式，设计师和前端同学需要为此付出大量的心血。单单是为13~27寸的桌面环境下不同浏览器来调整兼容性就已经颇为费神了，还要兼顾到从3英寸到9.7英寸的各种手机和平板，这中间如何平衡屏幕尺寸和像素密度（PPI）也够大家喝一壶的了。

2014/09/13

响应式布局

不藏不掖着，响应式网页大揭秘来了！

网页

不藏不掖着，响应式网页大揭秘来了！

如果你不熟悉响应式设计，这篇特意制作了超多动图，可以帮你轻松看懂，基础差也不怕。

2013/11/10

经验分享：响应式排版中的基础知识

教程

经验分享：响应式排版中的基础知识

Arrietty：当我们建立网站的时候，我们一般从定义正文开始。正文的定义显示了你的主栏有多宽，其它几栏的大小就随它自己内容定义了。直到最近，各种屏幕分辨率或多或少是同质化的。

2013/10/18

响应式布局

高端揭秘：为你的响应式设计提速

前端开发

高端揭秘：为你的响应式设计提速

@MartinRGB 响应式设计是最近的流行词，能够打造多屏幕一致体验。现在几乎每个人都喜欢响应式设计，而且可以是没有原因的支持，这跟Flash刚出现那会火热的局面有点相似。然而，响应式设计带来了表现力的问题，这需要通过调整图像、压缩图像、改变图像大小等手段来解决。

2013/09/05

响应式布局

一套精致的响应式网页设计模版PSD下载

下载

一套精致的响应式网页设计模版PSD下载

超赞！难得的一套响应式网页模版，分别含iPad、iPhone、PC三个平台的界面设计。这对最近有响应式设计项目的设计师来说，绝对是不可多得的五星干货！

2013/03/18

教程

移动UI设计须知

在相对更小的空间里实现同样的功能，做到这一点并不容易。自从互联网发明以来，屏幕的尺寸一直稳步增长，网页设计师已经学会如何充分利用屏幕空间。现在的网格系统大概有960像素宽，在竖直方向允许无限延伸。

2013/01/22

教程

2013年10大网页设计趋势

TNW发布了2013年10大网页设计趋势：1、响应式布局盛行，即一个网站适配多种屏幕;2、重视字体的选择，使用Web字体;3、更少的使用Flash，使用其他任何可能替代的技术;4、苹果iOS的拟物化设计将不再时髦;5、使用巨大的背景图构造大气的视觉效果;6、产品和个人介绍页面留出更多空白;7、更多的社交网络分享入口;8、浅色、冷色调重新成为主流;9、移动App将取代一部分移动网页流量;10、内容依旧为王;好了，该到我们年终展望新年的时刻了。2012年我们看到一些新的设计趋势在Web设计领域，特别是响...

2013/01/01

2013网页设计

没有更多内容了

大家都在看

职场

文章 137

视觉设计

文章 203

干货合集

文章 206

求职面试

文章 167

字体下载

文章 141

设计规范

文章 216

优设大课堂

文章 142

干货

文章 154

ps技巧

文章 643

热门频道

设计专题

热门设计知识精挑细选

细节猎人

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

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

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

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

微信号：扫码添加

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

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

每天官微五分钟

一年萌新变大神

扫码关注

1000W

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

优优教程网

优设大课堂

设计师导航

优设训练营