致那些终将流行的响应式设计

如今,web应用已经深入到我们生活的方方面面了。而你知道吗?72%的用户们都希望他们访问的网站不仅在台式机或笔记本上有赏心悦目的界面,同时也能适应移动设备的屏幕。为此,身为设计师和工程师的我们必须紧抓这个潮流,走在前沿。达尔文教给世人最精准的四个字就是:适者生存。而响应式设计,凭借着其灵活可变的特性以及一些其他因素,必定会被越来越多的设计师青睐,成为未来web开发的一大主流设计模式。

Ethan
Marcotte,致力于推广响应式设计的先驱者,指出响应式设计基本上包括三大元素:流体网格,自适应的媒体以及CSS3媒体查询。简言之,响应式设计是一种自适应的设计模式,能灵活地应对不同显示设备的分辨率大小,像台式机,笔记本电脑,手机,平板电脑,平板手机,电子书等。

然而实现响应式设计并不是一件简单的事。Web设计师和工程师们常常面临着网站性能(主要是加载速度),广告,导航等多方面的挑战。不过这些挑战是设计过程中无可避免的一部分,也必将令响应式设计真正地变得赏心悦目和持久稳定。

可以看到的是,许多网站都已纷纷投向了响应式设计的怀抱。

2014年,轮到我们国内的设计师和工程师们大展身手,推动响应式设计的时候了。亲们,请取长补短,让自己做出来的网站也有响应式的magic吧!

致那些终将流行的响应式设计,布布扣,bubuko.com

时间: 2024-12-12 08:59:39

致那些终将流行的响应式设计的相关文章

超流行的响应式设计极简教程

网上关于响应式设计的教程好复杂,我写一个简版的. 简单说呢就针对不同的屏幕分辨率应用不同的CSS样式.比如在电脑.Pad设备上,屏幕比较宽,就可以一行放2个Div.到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div. 这里有2个关键点: 一是如何在不修改Dom结构的前提下调整布局. 二是如何判断屏幕分辨率并应用对应的CSS. 以上两点都应该不依赖与JS. 实现第一点依靠的是流式布局.就是所有参与布局的DIV都用float:left,宽度都用百分比表示.比如下图,黄色部分的宽度是60%,橘

想学习超流行的响应式设计?来看看这篇教程【转载】

网上关于响应式设计的教程好复杂,我写一个简版的. 简单说呢就针对不同的屏幕分辨率应用不同的CSS样式.比如在电脑.Pad设备上,屏幕比较宽,就可以一行放2个Div.到了手机上,或者Pad竖着拿的的时候,一行就只放1个Div. 这里有2个关键点: 一是如何在不修改Dom结构的前提下调整布局. 二是如何判断屏幕分辨率并应用对应的CSS. 以上两点都应该不依赖与JS. 实现第一点依靠的是流式布局.就是所有参与布局的DIV都用float:left,宽度都用百分比表示.比如下图,黄色部分的宽度是60%,橘

响应式设计三部曲

随着智能手机的流行,响应式网页设计无疑成为了如今网页设计的大趋势.对于新手来时,响应设计听起来有点复杂,但它实际上是比你想象的更简单.只需下面的3个步骤即可构建一个响应式的网页! 1.Meta Tag 大多数移动浏览器扩展的HTML页面到宽视口宽度,以便在屏幕上适合.您可以使用viewport meta标签来重设此.下面的视口标签告诉使用该设备的宽度视口宽度和禁用初始规模浏览器. <meta name="viewport" content="width=device-w

自适应设计与响应式设计

目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本.这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度. 于是,很早就有人设想,能不能"一次设计,普遍适用"

如何说服客户使用响应式设计?

网页设计是一个时效性很强的行业,我们需要紧跟趋势潮流,不断学习.响应式设计就是这个时代最值得学习.时间的趋势. 网络术语真是越来越流行了,现在即便是客户,也略知一二,很多客户对设计的了解也不浅.那么怎么说服客户呢?下面我将讲一点和客户沟通的技巧,让客户接受响应式设计(相应的,工钱你懂的). 投其所好 在任何项目的开始阶段,都要明白.了解.分析客户的需求. 在满足客户预期的基础上,尽量让客户能够完全的理解你的设计. 你要知道客户想要什么.在你的大脑中转换成术语后,再用平易近人的语言讲出来. 例如,

如何保持响应式设计新鲜感

响应式网页设计很流行,而且绝无秘密可言.行家们倡导,各品牌趋之若鹜.这不仅是创建一个移动端站点,而是让你的网站适用于每种浏览器尺寸,不论桌面端.平板还是智能手机 响应式设计的秘诀,是创建一个不论大小尺寸都美观的网站.在点开你的设计软件着手动工之前,你需要考虑很多.这是个额外步骤,最终成品却总能证明它的价值所在.很明显,设计师若不考虑响应式设计,网站就会倾向于呆板无趣 设计师绝对有必要保持自己的创意贯穿整个响应式站点.鉴于更多人在使用平板和智能手机,你总希望保证每个人都能访问你的网站.这里有一些提

如何让响应式设计保持吸引

响应式网页设计很流行,而且绝无秘密可言.行家们倡导,各品牌趋之若鹜.这不仅是创建一个移动端站点,而是让你的网站适用于每种浏览器尺寸,不论桌面端.平板还是智能手机 响应式设计的秘诀,是创建一个不论大小尺寸都美观的网站.在点开你的设计软件着手动工之前,你需要考虑很多.这是个额外步骤,最终成品却总能证明它的价值所在.很明显,设计师若不考虑响应式设计,网站就会倾向于呆板无趣 设计师绝对有必要保持自己的创意贯穿整个响应式站点.鉴于更多人在使用平板和智能手机,你总希望保证每个人都能访问你的网站.这里有一些提

使用 jQuery Mobile 和 CSS3 实现响应式设计

使用 jQuery Mobile 和 CSS3 实现响应式设计 创建可以适应每个用户的屏幕分辨率的 Web 页面布局 jQuery Mobile 框架就其本身而言就是一个优秀的解决方案,可以快速创建一个可访问的由 HTML5 标记驱动的移动网站.当与 CSS3 配合使用时,工作真的会变得很有趣,因为它使创建一个根据屏幕分辨率来响应用户设备的 Web 页面布局成为可能.本文展示了如何使用 jQuery Mobile 框架和 CSS3 媒体查询在您的 Web 页面中实现响应式设计. jQuery M

刚做完几个简单的响应式设计的网站项目下来,杂七杂八 (一)

之前没接触过responsive design这玩意,突然最近客户的项目都要求要有响应式设计的要求: 1,当浏览器缩放时,页面要根据浏览器大小,而自动适应. 2,当用手机或者移动设备打开页面时,页面会根据屏幕浏览器的大小自动适应. 3,移动设备有横屏和竖屏之分,页面也要相应适应 首页设计 UI设计师只设计出了2种mockup,一种是full site一种是mobile site然后扔过来,一看那mockup就知道是当前比较流行的设计风格. 1,页头head,左logo右菜单:在full site