精华内容
下载资源
问答
  • 响应式和自适应的区别
    千次阅读
    2019-04-13 09:28:06

    自适应:百分比布局,宽度使用百分比,文字使用em,现在也很多使用rem了,也就是所谓的高清方案;

    响应式:据屏幕的大小自动的调整页面的展现方式,以及布局;

    区别:

    两种方式的解决问题是不一样的;

    • 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页;
    • 响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局

     

    更多相关内容
  • 自适应和响应式区别

    千次阅读 2019-11-02 13:53:06
    自适应:百分比布局,宽度使用百分比,文字使用em,现在也...响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局 —————————————...

    区别:
      自适应:需要开发多套界面;
      响应式:只需开发一套界面。
    1.自适应:
      通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。
    2.响应式:
      对页面做的屏幕适配是在一定范围:比如pc端(>1024)一套适配,平板(768-1024)一套适配,手机端(<768)一套适配;响应式一套页面全部适配。(可以想象:响应式设计要考虑的内容要比自适应设计复杂的多)
      在这里插入图片描述
      响应式设计(RWD):建立一个网页,通过CSS Media Query,Content - Based Breakpoint等技术来改变网页的大小适应不同分辨率的屏幕。
      自适应设计(AWD):为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。

    展开全文
  • 响应式和自适应布局的区别

    千次阅读 2018-05-01 23:08:41
    自适应:自己根据屏幕宽度的改变而改变...在不同的设备、分辨率下展示不同的页面效果)下面再从直观一点的来看,响应式和自适应区别: 首先两种方式解决问题的是不一样的。 自适应是为了解决如何才能在不同大小的...

    自适应:自己根据屏幕宽度的改变而改变(典型的写法不需要media判断,直接让每个元素通过相对的宽度,比如百分比vhem 、rem等来改变容器的大小,文字的大小)

    响应式:根据设备的不同而展示不同的效果(典型的写法就是通过media判断,在不同的设备、分辨率下展示不同的页面效果)

    下面再从直观一点的来看,响应式和自适应的区别: 

    首先两种方式解决问题的是不一样的。 
    自适应是为了解决如何才能在不同大小的设备上呈现同样的网页手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。 
    很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。 

    于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小但是无论怎样,他们主体的内容和布局是没有变的。 即,后来的响应式

    响应式布局的一些技术点纪录:

    (1)允许网页的宽度自动的调整

    (2)尽量少使用绝对的宽度,多点百分比

    (3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置

    (4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    (5)选择加载css,<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />,这个意思是如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。 

    但是无论怎样,他们主体的内容和布局是没有变的。

    响应式的概念应该覆盖了自适应,而且涵盖的内容更多。 

    自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤,响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。例如有六张图片,屏幕宽度大于1300像素,则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。如果屏幕宽度在400像素以下,则6张图片分成三行。mediaqueri.es上面有很多多这样的例子。
    展开全文
  • 在网上经常看到一些博客写到响应式和自适应区别的文章,但是看多了,就会发现很多人说的都不太一样,最后导致自己都没有搞清楚到底什么是响应式布局?什么是自适应布局?所以想在这里对自己的理解做个记录,也方便...

    在网上经常看到一些博客写到响应式和自适应的区别的文章,但是看多了,就会发现很多人说的都不太一样,最后导致自己都没有搞清楚到底什么是响应式布局?什么是自适应布局?所以想在这里对自己的理解做个记录,也方便分享给大家。

    1、自适应:

    通常我们使用弹性盒子、百分比的时候,都属于自适应布局。这里简单附上一个例子。

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>自适应</title>
    	<style>
    		.box {
    			width: 100%;
    			height: 100px;
    			display: flex;
    		}
    
    		.div1, .div2 {
    			width: 50%;
    			height: 100px;
    		}
    
    		.div1 {
    			background: red;
    		}
    
    		.div2 {
    			background: blue;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</div>
    </body>
    </html>

    如该例子,只是使用了flex弹性布局和百分比的尺寸,这种布局如果在浏览器窗口或者其它设备的视口宽度较小的情况下,里面的内容会被挤的很小,某些情况下还会导致无法看清。在我个人的理解里,这种布局方式就是自适应布局。

     

    2、响应式:

    响应式也是在自适应的基础上构建的,只是响应式比自适应多了媒体查询(media queries),媒体查询可检测viewport宽度和高度、设备的宽度和高度、设备是否横屏以及分辨率。当知道这些信息的时候,其实就可以显示不同的css样式。bootstrap的实现原理其实也是根据媒体查询。这里也附上一个例子:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>响应式</title>
    	<style>
    		.box {
    			width: 100%;
    			height: 100px;
    			display: flex;
    		}
    
    		.div1, .div2 {
    			width: 50%;
    			height: 100px;
    		}
    
    		.div1 {
    			background: red;
    		}
    
    		.div2 {
    			background: blue;
    		}
    
    		/*响应式代码*/
    		@media screen and (max-width: 500px) {
    			.box {
    				width: 100%;
    				height: 100px;
    				display: block;
    			}
    
    			.div1, .div2 {
    				width: 100%;
    				height: 100px;
    			}
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    		<div class="div1"></div>
    		<div class="div2"></div>
    	</div>
    </body>
    </html>

    当窗口大于500px时,显示的样式:

    当窗口小于等于500px时,显示的样式:

    相信大家都懂得这些技术,而这篇文章的目的也不是说去讲解自适应与响应式的技术方法,而仅仅是区分什么是响应式布局、什么是自适应布局。但这也仅代表个人看法,如有说的不对的地方欢迎指出。

    展开全文
  • 响应式自适应

    2019-05-09 23:44:18
    一、 响应式 (1)何为响应式 响应式就是网站返回一个网站展示文件,浏览器根据屏幕的大小而采用不同布局的视觉最适合的效果,意思同一个网站就是不同的屏幕大小会形成不同布局效果,目的都是为了根据屏幕的大小展现...
  • jQuery响应式自适应代码案例,电脑端、平板端、手机端
  • 响应式和自适应有什么区别?

    千次阅读 2019-09-18 11:28:21
    这并不是第一次接触到自适应布局和响应式布局等名词,但是没有仔细研究,概念也不是很清晰,对于他们的了解一直是一个懵懂的状态,借此机会自己查阅了很多资料,研究了一下他们的区别、优缺点、来巩固自己头脑中的...
  • html5响应式手机自适应品牌设计类公司网站织梦模板,花钱买的网站程序,完整无错,能省去开发者不少的时间,界面还行,个人觉得效果不错。
  • 响应式自适应区别响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、...
  • 超简单js实现响应式+自适应瀑布流 原理:item平铺,设置基本宽度,根据基本宽度及窗口宽度算出列数,接着算出剩余宽度,看是否够间隔宽度,不够则列数减1, 然后窗口宽度减去所有间隔宽度再除以列数得到列的最张宽度...
  • 响应式布局和自适应布局的区别

    千次阅读 2020-02-16 18:12:08
    响应式布局能使网站在手机平板电脑上有更好的浏览体验,也就就是说一个网站能后兼容多个终端,而不是为了每一个终端做一个特定的版本。 自适应布局:就是能为了使网页自适应的显示在不同大小终端设备上的新网页...
  • 响应式和自适应区别

    2017-01-30 23:22:01
    先给大家体验一下响应式和自适应区别,请放大缩小一下屏幕尝试  自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/  整理了几篇自适应和响应式的文章,摘抄并修改了一下,请...
  • 手机网页会员中心响应式自适应页面源码,手机网页会员中心的前端网页,用html+css+css3开发,页面支持响应式自适应,代码清晰简洁,拿去改下显示内容图片就能直接用
  • h5响应式手机自适应茶叶网站html源码模板
  • 网站模板源码-html5响应式手机自适应网站模板(兼容手机版)demo29。资源中包含了详细的系统图文搭建教程。源码都是实际项目,经过测试可以正常稳定运行在服务器,需要具备基础服务器搭建知识,不会搭建的请谨慎购买...
  • 本篇文章主要介绍了HTML5响应式自适应)网页设计的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 它使得把握设计最终效果变得更难,同样让响应式布局更加的难以测试预测。但同时说难,这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中,你也会因此更好的掌握一些基础知识...
  • 自适应和响应式的介绍和区别

    万次阅读 多人点赞 2018-06-13 10:17:57
    [百科]:响应式设计是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 自适应设计...
  • 主要介绍了自适应屏幕的CSS响应式布局设计技巧总结,响应式设计是现在移动端页面开发的热门话题,需要的朋友可以参考下
  • 适合文章教育政府类的通用行业模板 大气简洁 漂亮 没话说 请看演示截图与演示(请联系店主) 鼠标移动响应式 分段加载 速度更快 seo更好 红色大气适合很多行业 手机自动适应模板 全站带少量数据.
  • 模板名称: html5响应式自适应电子产品类公司 织梦模板 模板介绍: 页面简洁简单,容易管理,DEDE内核都可以使用;附带测试数据! 模板主要适用于,电子产品网站、数码器材网站、企业通用类型的模板。 模板特点: 1....
  • 学了前端一段时间了,发现大家都搅浑了自适应布局和响应式布局的差别。现在我来大家说下它们的不同: 自适应的体验 http://m.ctrip.com/html5/响应式的体验 http://segmentfault.com/    整理了自己查阅的...
  • 很长一段时间以来,都以为响应式网站就是自适应网站,这是两个一样的概念。后来机缘巧合认识了一位前端大拿,给我好好上了一课,终于能把这两种网站前端表现形式给讲透了。现摘录如下: 1、响应式网站由来 最开始...
  • 源码简介 精心改良过的后台,更适合接企业建站单时,给客户使用。简洁明了,容易操作,没有织梦的广告。... 基于响应式设计,自适应手机端,逼格更高,可以让企业主在手机上完美的玩转网站的后台!...
  • 在移动站建设优化中,我们经常会听到响应式和自适应这两个名词,这两者之间有什么区别呢?如何判断是响应式布局还是自适应布局呢?自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,让同一张网页自动...
  • 自适应和响应式

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,060
精华内容 14,824
关键字:

响应式和自适应的区别