首页 > 教程 > 关键词 > 自适应网页设计最新资讯 > 正文

自适应网页设计(Responsive Web Design)

2012-05-02 09:26 · 稿源:阮一峰博客

随着3G的普及,越来越多的人使用手机上网。

移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

一、"自适应网页设计"的概念

2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

如果屏幕宽度在400像素以下,则6张图片分成三行。

mediaqueri.es上面有更多这样的例子。

这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

  • 相关推荐
  • 大家在看
  • 站长之家诚聘:SEO高手、资深网页设计师、JAVA/GO/PHP/.NET工程师

    2020年站长之家开启新一波人员招募,欢迎小伙伴加盟。本次的首推职位有资深SEO高手、资深网页设计师、JAVA/GO/PHP/.NET程序员,欢迎大家投递简历到hr@chinaz.com邮箱(务必附作品、工作经历、工作成绩等)。SEO高手(若干人)职责描述:1、负责站长之家网站的搜索引擎优化方案设计,提高网站流量、收录和排名;2、负责监控和调研搜索引擎数据与规则,调研竞争对手及其他网站相关策略,制定并实施应对和优化方案;3、负责对SEO相关数据进

  • 苹果发布iOS 14.2公测版:继续调整主屏设计

    今天苹果发布了iOS 14.2的公测版,而在这之前他们刚刚推送iOS 14的正式版。从新推送的公测版来看,苹果继续是围绕在对主界面的改动上,出发点还是希望集成更多的信息,让用户免于去二级页面或

  • 苹果发布iOS14.2公测版:继续调整主屏设计

    今天苹果发布了iOS 14. 2 的公测版,而在这之前他们刚刚推送iOS14 的正式版。从新推送的公测版来看,苹果继续是围绕在对主界面的改动上,出发点还是希望集成更多的信息,让用户免于去二级页面或者相关应用中找寻那些简单易获取的信息。

  • seo基础之内链布局与意义

    内链最大的作用是减少用户的跳出,而很多新手们总是忘记这个本质,甚至经常忘记搜索引擎的本质——最大化模拟用户行为、揣度用户需求。最早搜索引擎对待内链态度的时候是不怎么考虑相关性的,因此催生出一大批内链文,拼命为文章加内链,生怕少一个吃亏,而后百度更新了规则,对文字数量能够支撑的内链数以及相关性做了限制,于是一批站就这么消失了。

  • 如何设计抖音主页头图 抖音背景图怎么设计

    抖音主页头图要怎么设计会比较好看,让人留下比较深的印象呢,背景图的设计思路以及主要考虑的因素有哪些。下面我们会通过几个要点来介绍下,抖音背景图的设计注意要点,大家在抖音设计自己的头图时可以参考下。1、KOL出镜,也就是自己抖音视频里的主角出现在头图背景图里面,让他/她成为标志性IP,记得要使用好看的高清形象照,不用其他过多文字或其他修饰就能引流2、在头图里面,再次自我介绍,完成对账号的简介的补充说明,或者

  • 如何设计抖音LOGO头像 抖音logo怎么设计好看

    抖音账号的头像LOGO要怎么设计比较好看,又符合自己账号的定位属性,什么头像可以让别人一眼看了之后留下深刻印象呢,这里我们来一起了解下如何设计好一个抖音的logo头像。

  • 如约而至!科勒精选·设计中国北京设计论坛即将开幕

    亚洲高端设计大展“设计中国北京” 2020 将与全球厨卫领导品牌科勒KOHLER再度合作,邀请来自国内外顶尖的设计大师,以“以设计之道复兴世界”为主题开展为期 4 天的科勒精选·设计中国北京设计论坛。其中,展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。2020 年注定是不平凡的一年,第三届“设计中国北京”( 9 月 23 日 –9 月 26 日)重磅回归,旨在凝聚全球设计的力量,以前瞻思想深入探讨“后?

  • 科勒再度携手设计中国北京,以设计凝聚幸福点滴

    2020 年 9 月 23 日 –9 月 26 日,亚洲高端设计大展“设计中国北京” 2020 即将隆重举行,全球厨卫领导品牌科勒KOHLER作为论坛的冠名赞助商,再度携手“设计中国北京”,带来为期 4 天的科勒精选·设计中国北京 设计论坛。本届论坛汇聚来自国内外 30 余位顶尖设计师的前瞻思想,将以“以设计之道复兴世界”为主题展开探讨。展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。在设计中感知幸福生活在

  • 深度布局新基建,并行科技助力云上科研

    2020 年 9 月 28 日至 30 日,以“新超算、新基建、新经济”为主题的第十六届全国高性能计算学术年会(CCF HPC CHINA 2020)在河南郑州举行。本次大会通过打造HPC CHINA云平台,全新升级云体验, 40 余场在线论坛和赛事展览活动,为全球10000+专业观众与HPC爱好者带来超算领域前沿学术成果展示、创新应用技术发布体验,来自中、美、日等多国顶尖科研机构、头部企业和高校的近 300 位HPC领域专家学者受邀出席线下论坛活动。中国超算/?

  • 字节跳动布局社区团购 最快11月试点

    知情人士透露,字节跳动正在招兵买马,布局社区团购,最快11月在山东中部地区试点。接近字节跳动人士透露,社区团购将成为一级事业部。新事业部可能命名为“今日优选”、“今日买菜”或“跳动优选”。

  • 水发兴业能源布局洋口港 加速开拓油气综合业务

    作为曾经的港股新股股王、上市五年最高大涨逾13倍的水发兴业能源(0750.HK,原名“兴业太阳能(行情000591,诊股)”),在遭遇债务违约后逐渐退出投资者视野。 公司董事会副主席刘红维在接受证券时报记者采访时回忆道,公司高光时刻业绩发布会参与人数接近200人,而今公司无人问津,回顾起来当时主要是因为在国内光伏产业大环境发生变化的情况下,公司管理层没有及时作出战略调整导致的。去年11月,公司由水发集团控股之后,依托控?

  • 顺应市场变化前瞻布局,都市丽人改革加速

    借由疫情影响,国内内衣第一股——都市丽人趁着科技与消费方式变化的东风加快了转型节奏,在优化线下店面的同时加紧布局线上销售渠道,逆势发展。 当然,线上渠道快速发展的背后,消费升级带来新消费场景的变化非常值得思考。对此,都市丽人目前正在打造九大生活场景,并根据客群类型、消费倾向等设置了五种类型的店铺,分别是综合型、青春型、时尚型、社区型、大众型,各店型的市场定位明确,不同店型对应不同的消费人群,不同的

  • 上直播联手稿定设计,共同推进视频直播+在线设计服务的融合之道

    近日,上直播与稿定设计达成战略合作,双方将持续探索企业视频直播与商业设计领域的跨界融合,为双方的使用受众提供更多元化的视频直播和在线设计领域的使用体验,共同推动视频直播和在线设计的融合发展。上直播是国内知名的企业直播服务商,旨在为企业提供从视频内容生产、内容运营、大数据精准营销于一体的完整营销闭环服务,衍生了教育培训、医疗、金融、企业内训、汽车、房产、互联网等众多行业的企业视频直播解决方案,当前已

  • 消息称字节跳动将布局社区团购 最快月底入局

    字节跳动将大力布局社区团购领域,并在今年下半年已经开始入局计划。新事业部可能命名为“今日优选”、“今日买菜”或“跳动优选”。

  • 知乎推出优秀视频答主扶持计划 着力布局视频板块

    知乎推出最新视频创作者扶持计划。该项目内容主要包括五亿现金激励、百亿流量扶持、视频工具、签约机会和创作者学院等在内的一揽子计划,帮助视频创作者和平台共同成长。创作者通过知乎官方渠道报名,筛选符合条件的创作者在知乎发布时长1分钟以上的原创视频,就可以享受上述扶持内容。同时,据悉,近期知乎签约了一批创作者,涵盖科普、财经、萌宠等领域,提供保底现金、补贴和流量扶持,要求是每月发

  • 数字经济浪潮席卷全球,信飞数科率先布局抢占高地

    回顾这个中秋国庆双假期,“简直就像过年一样!”想必是很多人对假期的直观感受。同时信息技术应用渗透到社会经济生活,我们在移动支付、智能消费、共享出行等各领域获取的大数据,也印证了人们的感受。 毋庸置疑,数字经济已成为推动经济发展的动力源。特别是经历过疫情的冲击,数字经济的价值进一步显现。新一代网络信息技术不断创新突破,数字化、网络化、智能化深入发展,各行各业坚定且加快了向数字化转型的脚步,积极拥抱数

  • 光汇石油退出H股背后:布局上游油气资源,回归A股上市?

    随着回归潮的愈演愈烈,许多优质的公司都选择退市并启动A股上市之路。 10 月 9 日,记者从港交所公告得知,上市覆核委员会决定将维持取消光汇石油(00933.HK)上市地位的决定,公司股份继续停牌。退市或为回归A股记者从光汇石油获悉,回归A股是光汇石油未来的战略部署。目前光汇石油正处于战略调整转型阶段,重组计划接近完成,业务重心转向深耕上游油气资产,同时推行“重资产+轻资产”并行发展的模式。有行业观察人士分析认为,中?

  • 字节跳动买下5家网文公司,加速上游布局?

    ​再度瞄准网文平台,入股九库文学网,短短半年多时间,这已经是字节跳动的第 5 次出手。舆论一度高涨,张一鸣开始对网文平台扫货,是不是要加速影视化了。

  • 抖音内容布局优劣标准 抖音如何做好内容定位

    抖音短视频平台上有很多的领域都比较火爆,但也有比较冷门、不太经常出现爆款的视频领域,在抖音账号内容定位的时候,要怎么选择适合自己的领域呢,有哪些标准可以作为参考选择,以下我们来详细了解下。

  • 信用飞布局大数据风控,杜绝乱收费

    近年来全球新一轮信息革命全面爆发,以互联网、大数据、人工智能等为代表的数字科技的技术创新和融合的应用,对经济转型、社会发展、大众生活和国际竞争都产生了重要影响。充分利用好和发挥好数字科技发展强大的渗透、溢出、带动和引领等作用,加快推进互联网、大数据、人工智能等数字科技和实体经济的深度融合,大力发展数字经济,推动经济发展质量变革、效率变革、动力变革,已经成为经济高质量发展的重要路径选择。信用飞是数?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签

热文

  • 3 天
  • 7天