为什么响应式设计和自适应设计不同_百度知道
为什么响应式设计和自适应设计不同
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
育知同创教育知道合伙人
百度知道合伙人官方认证企业
育知同创教育
知道合伙人
1、【专注：Python+人工智能|Java大数据|HTML5培训】。 2、【免费提供名师直播课堂、公开课及视频教程】。 3、【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
响应式和自适应起源起初，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800 850 870 880。比如：模板客的网页就是固定宽度为1000来定制的。至于为什么是1000，因为模板客用户体验师觉得1000的体验较好。后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。于是出现了一种新的布局方式宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。响应式和自适应的区别：首先两种方式解决问题的是不一样的。自适应是为了解决如何才能在不同大小的设备上呈现同样的网页：
匿名用户知道合伙人
没什么大的不同，叫法不一样吧。
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。《HTML5布局之路》(刘国利)【摘要 书评 试读】- 京东图书
客户服务
HTML5布局之路
京 东 价 &
[定价 &￥]
PLUS会员专享价
您购买此商品可享受专属价
增值业务 &
重　　量 &
搭配赠品 &
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
加载中，请稍候...
商品介绍加载中...
下载客户端，开始阅读之旅
权利声明：京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。
注：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。
印刷版次不同，印刷时间和版次以实物为准。
价格说明：
京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
划线价：商品展示的划横线价格为参考价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
折扣：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。
异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
iframe(src='//www.googletagmanager.com/ns.html?id=GTM-T947SH', height='0', width='0', style='display: visibility:')论文发表、论文指导
周一至周五
9：00&22：00
响应式网页设计初探
　　【摘 要】无线网络技术的发展和移动设备的普及为人们的生活带来了便利，越来越多的用户选择通过智能手机、平板电脑等移动终端访问互联网。如何使网页能够在不同屏幕分辨率下完美地呈现？笔者对响应式网页设计中媒体查询、流式布局、弹性图片、弹性文本等方面进行了分析。 中国论文网 /9/view-7083635.htm　　【关键词】网页设计 响应式设计 自适应 　　【中图分类号】TP393.0 【文献标识码】A 【文章编号】（5-02 　　一 引言 　　伴随着无线网络技术的快速发展，智能手机和平板电脑越来越受到人们的青睐，各种尺寸的设备也是层出不穷。人们希望在享受移动终端便利的同时，能够拥有与桌面终端同样美好的视觉体验。然而，同样内容的网页要在不同分辨率的显示器上呈现出满意的效果并不是一件容易的事。很多网站的解决办法是，为不同尺寸的设备制作不同版本的网站，如专门提供手机版网站，以保证网页在移动终端设备上的显示效果。事实上，这一做法不仅增加了网站架构设计的复杂度，增加了网站的维护成本，而且手机版网站也并不能够保证在所有的移动终端上都能够正常显示。为了让网站的页面最大限度地适应各种性能与规格的终端设备，响应式网页设计诞生了。 　　二 响应式网页设计概述 　　响应式网页设计（RWD，Responsive Web Design）又称为自适应网页设计，是伊桑?马克特（Ethan Marcotte）于2010年提出的。伊桑?马克特在A List Apart发表了一篇名为“Responsive Web Design”的开创性文章，文章将建筑学的响应式架构思想延伸到网页开发领域，认为物理空间可以根据人的情况而进行不断的响应，从而可以得到一个全新的设计技术，使得Web网页设计同样可以根据不同的设备终端进行自动响应和调整。伊桑?马克特将媒体查询（Media Queries）、流式布局（Fluid Grids）、弹性图片（Fluid Image）三种开发技巧结合起来命名为响应式网页设计。响应式网页设计可以适应多种不同设备的屏幕尺寸和分辨率，并做出相应的调整和布局。 　　响应式网页设计是一种以用户为中心的设计模式，它的实质是根据多样化的浏览设备来对页面内容进行完美布局的一种显示机制。响应式网页设计可以让网页自动适应不同尺寸、不同分辨率的屏幕，并根据屏幕宽度自动调整布局，它可以为不同终端的用户提供更加流畅和灵活的界面从而实现更舒适的用户体验，是一种面向未来的可靠的网页设计解决方案。 　　三 响应式网页设计的核心技术 　　1.媒体查询 　　媒体查询，它是响应式网页设计的核心，由媒体类型和检测媒体特性的条件表达式组成，用于设置某种媒体特性下的显示规则。它会自动检测不同的媒体或同一媒体的不同条件，然后加载相应的CSS文件。网页开发人员只需要根据不同显示器分辨率来编写不同的页面布局样式，然后上网设备会根据自身的屏幕分辨率来选择其适合的页面布局，从而达到改善用户浏览体验的目的。 　　媒体特性的种类很多，但响应式设计的媒体查询检测的属性主要包括：屏幕宽高比例、视口（显示区域）的宽高、屏幕方向（即设备处于垂直或水平的状态）等功能特性。这些属性通过“与或非”等逻辑运算符形成相应的表达式，用来判断是否为特定的目标设备类型，从而加载特殊样式、调整页面布局。 　　一般来讲，媒体查询顺序采用移动优先设计，遵循渐进增强原则，而非早期网站设计提倡的优雅降级原则。优先建立移动设备用户体验，确保移动用户能够访问所有基本内容，满足简洁、顺畅的情境需求，然后针对更高的分辨率进行调整，创造更丰富的体验。即，在样式表的开头定义基本样式，然后使用媒体查询从低分辨率到高分辨率来重写样式，以覆盖前面定义的样式，来渐进地改善在平板电脑和桌面电脑上呈现的质量。这种设计可以保持对最重要特性的关注，使得不同设备上的统一体验得以实现，也可以降低CSS代码的复杂性，减少冗余代码。 　　2.流式布局 　　仅靠媒体查询是不能很好地实现页面的响应式设计的，网页本身的布局结构也会影响响应式页面设计的显示效果。传统的网页布局方法是固定布局方法，即以像素为单位来固定网页的宽度。这种布局方式由于最外层的容器宽度是固定不变的，所以不论访问者的浏览器分辨率是多少，他们所看到的网页宽度都是相同的。当屏幕较大时，页面两侧会出现大片的空白区域；当屏幕较小时，页面内容不能完全显示，用户只能不断地通过拖动水平滚动条或手指滑动来进行浏览。 　　流式布局主要使用百分比来设置网页各部分的宽度，结合CSS中的元素浮动属性，可以让网页中的元素根据视口变化自动调整自身宽度及位置，以适应不同的屏幕分辨率。流式布局网页中各个容器的位置都是浮动的，当视口宽度小于页面中某个元素时，该元素会自动浮动到上面元素的下方显示，而不会在水平方向上溢出，这样就避免了水平滚动条的出现。 　　如果已经拥有了一个固定像素布局的网页，那么将固定像素宽度转换成百分比宽度可以这样计算，即百分比宽度等于目标元素宽度除以上下文元素宽度。因此，只要明确了上下文元素，就可以很方便地将固定像素宽度转换为对应的百分比宽度，以便实现百分比布局。 　　此外，在传统网站中，页面元素的大小都精确为某个绝对尺寸。然而，在响应式设计中，为了配合流式布局，需要对页面元素使用相对尺寸，即使用百分比设置，这样能够使网页能更好地适应各种屏幕。 　　3.弹性图片 　　响应式网页设计除了页面结构可以自适应缩放外，图片也要能相应地实现大小随窗口尺寸自适应变化。一般情况下，网页上的图像都会以原始宽度进行加载，当包含某个元素的视口宽度小于图像的原始宽度时，图像的某些部分会被遮挡或隐藏。当分辨率发生变化时，如何实现图片的轻松缩放呢？弹性图片设计的本质是确保图片适应页面版式布局的变化，确保图片的可读性。它使得图片在响应分辨率变化的同时，能够不失真地进行缩放或裁剪，以提供友好的显示。弹性图片设计最常用的方法是使用CSS的max-width属性，代码为：img{max-width：100%；}。max-width：100%的意思是如果指定图片的宽度不超过父级元素的宽度，则大小不变，如果超过了父级元素的宽度，则将宽度收缩为父级元素的宽度。这样就可以确保图像在其包含元素的可视宽度下以最大的宽度同比完整地显示，当图像所在的包含元素宽度变大或变小时，图像也会随之变大或变小，实现自由缩放。当然，如果将代码改为：img，video，object{max-width：100%；}，则对视频等其他的嵌套媒体同样有效。 　　4.弹性文本 　　网站开发者常用像素（px）来精确控制文本大小，但是不同的屏幕具有不同的分辨率，这可能会造成文字在某些设备上看起来太大或太小。响应式网页设计中，页面上显示的文本大小单位采用了“em”，它是一种相对长度单位，是相对于当前对象内文本尺寸而言的。“em”可以实现跨浏览器缩放，具有更好的灵活性和可访问性。如果给标签中的文本设置font-size属性值后，其他文字都使用相对单位“em”，那么这些文字都会受到标签中文本设置的影响，调整默认基准或倍数，其余的文本就会自动按比例进行缩放，从而为网页的设计、开发和维护带来很多便利。将文字的固定尺寸转换为相对尺寸的计算方法与百分比布局的计算方法相同，即，百分比尺寸等于目标元素尺寸除以上下文元素尺寸。 　　四 结束语 　　随着无线网络技术的发展，移动设备正在迅猛增长并即将成为最主流的上网终端。越来越多的网站将会采用响应式设计方式，由以桌面电脑为中心的设计思想逐渐转化为为未知设备而设计的思想。响应式网页设计从媒体查询、流式布局、弹性图片开始，但它的发展还远不止于此，仍然在不断变化，不断创新。“让用户忘记设备的尺寸”的理念将更快地驱动响应式设计不断向前，使其展现出更加优良的设计效果和用户体验并成为网页设计的趋势。 　　参考文献 　　[1]邢希、田兴彦、王世运.响应式Web设计方法的研究[J].琼州学院学报，2013（2）：36～38 　　[2]王愉、潘明明.响应式网页设计初探[J].北京印刷学院学报，2014（3）：13～15 　　[3]张欣辉.响应式网页设计的研究[J].电子技术与软件工程，2014（18）：57 　　[4]游琪.响应式网页设计在移动互联网中的应用[J].计算机光盘软件与应用，2014（14）：293～294 　　[5]林瀛瀛.响应式设计技术在视频网站开发中的应用[D].东华大学， 　　〔责任编辑：林劲〕
转载请注明来源。原文地址：
【xzbu】郑重声明：本网站资源、信息来源于网络，完全免费共享，仅供学习和研究使用，版权和著作权归原作者所有，如有不愿意被转载的情况，请通知我们删除已转载的信息。
xzbu发布此信息目的在于传播更多信息，与本网站立场无关。xzbu不保证该信息（包括但不限于文字、数据及图表）准确性、真实性、完整性等。Web中内嵌内容实现响应式效果_Responsive 教程_w3cplus