精华内容
下载资源
问答
  • 自适应:百分比布局,宽度使用百分比,文字使用em,现在也...响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局 —————————————...

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

    展开全文
  • 自适应响应式的介绍和区别

    万次阅读 2018-06-13 10:17:57
    [百科]:响应式设计是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 自适应设计...

    前言


    “自适应设计和响应式设计的区别”是个老生常谈的问题,在这里将更加直白的来介绍它们之间的不同之处。

    视口


    先来了解一个概念(下文中经常出现):
    视口:用户浏览信息屏幕尺寸大小(每一个视口后面都是真实一位的用户)

    概念:


    响应式设计(Responsive design):

    [百科]:响应式设计是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

    自适应设计(Adaptive Design)

    [百科]:自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
    image

    不同点


    • 比较直观的不同是:自适应:需要开发多套界面;响应式开发一套界面
    • 自适应设计 通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。
    • 自适应 对页面做的屏幕适配是在一定范围:比如pc端(>1024)一套适配,平板(768-1024)一套适配,手机端(<768)一套适配;响应式一套页面全部适配。(可以想象:响应式设计要考虑的内容要比自适应设计复杂的多)

    Adaptive design (自适应设计实现原理):是为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。在app横行的当下,目前国内自适应布局应用主要集中在视口已经很稳定的web端,(web端视口大数据[2016])针对笔记本,台式机进行优化体验。

    响应式设计(Responsive design)是一套界面同时运行到pc端、平板、手机端各个不同的视口。通过检测设备的分辨率,来对页面做出不同的布局和内容。

    共同点


    两者都是优化适应互联网中越来越分化的视口浏览体验,而出现的为视口提供更好的体验的技术。用技术来使页面适应不同分辨率的视口的设计。

    响应式优缺点和标志


    标志
    • 面包屑菜单
    • 改变浏览器宽度会在不同分辨率下显示不同的布局
    优点:
    • 面对不同分辨率设备灵活性强
    • 能够快捷解决多设备显示适应问题
    缺点:
    • 仅适用布局、信息、框架并不复杂的部门类型网站
    • 兼容各种设备工作量大,效率低下
    • 代码累赘,会出现隐藏无用的元素,加载时间加长
    • 其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
    • 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

    自适应网站优缺点和标志


    标志
    • 大多只是适配单个终端的主流N个主流视口(2-3个)
    • 当视口大小低于设置的最小视口时,界面会出现显示不全,溢出,并出现横向滑动指示器(主要出现在pc端,移动端决不允许出现这种情况)
    • 总体框架不变,横线布局的板块大多会有所减少
    优点
    • 对网站的复杂程度兼容性更大
    • 实施起来代价更低,
    • 代码更高效
    • 测试更容易,运营相对更精准(图片可控性更高)
    缺点:
    • 在移动端设计大行其道之下,同一个网站,往往需要为不同的设备开发不同的页面,增加开发成本
    • 当需求改变时,可能会改动多套代码。流程繁琐。

    服务于设计和 开发


    理论上来说,响应式布局在任何情况下都比自适应布局好一些,但在某些情况下自适应布局更切实际。

    自适应布局可以让你的设计更加可控,因为你只需要考虑几种状态就万事大吉了。

    但在响应式布局中你可能需要面对非常多状态——是的,大部分状态之间的区别很小,但它们又的确是不同的,这样一来就很难确切搞清你的设计会是什么样。

    同时这也带来了测试上的难题,你很难有绝对的把握预测到它会怎样。

    换个角度说,这也是响应式布局的魅力所在。相比较来说自适应布局有它自己的优势,因为它们实施起来代价更低,测试更容易,这往往让他们成为更切实际的解决方案。

    其实,无论是哪种设计理念都是各有优缺点,具体的选择还是要从团队/项目实际需求出发去选择。

    参考博客和文档

    1. 叶落偏执
    2. 皮卡小丘
    展开全文
  • 自适应 根据不同的屏幕设备设计不同的样式,自适应网页也被称为逐渐增强的网站。 渐进增强 Progress enhancement 先实现一个满足大部分设备基础功能的版本,然后,针对性的兼容的增加一些新功能和新...响应式 通...

    自适应

    根据不同的屏幕设备设计不同的样式,自适应网页也被称为逐渐增强的网站。

    • 渐进增强 Progress enhancement

      先实现一个满足大部分设备基础功能的版本,然后,针对性的兼容的增加一些新功能和新特性,逐步的拓展应用。

    • 图片自适应

      (1)设置最大宽度和高度 max-width: 100%;目的是为了避免放大图片后图片失真。
      (2)针对不同的屏幕尺寸给出相应的图片

    响应式

    通过调整元素的位置去适应可用空间来响应浏览器窗口或者设备尺寸的一个变化。

    • 具体方案

      媒体查询,弹性盒子,百分比布局,相对单位

    补充

    优雅降级和渐进增强

    • 优雅降级: 在新式浏览器中都能正常工作 + 针对不同版本的IE使用hack降级 + 为无法支持的功能增加候选方案

    • 渐进增强:被所有浏览器支持的基本功能 + 只有新式浏览器才支持的功能 + 无害于基础浏览器的额外样式和功能

    展开全文
  • 自适应与响应式的区别?

    千次阅读 2018-07-12 17:59:37
    响应式(Responsive design):所有设备的代码是一样的。 允许网页的宽度自动的调整 尽量少使用绝对的宽度,多点百分比 相对大小的字体:不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个单位不限制于...
           随着显示器的越来越多,以及笔记本的普及,逐渐出现了新的布局方式:百分比宽度布局和流式布局。这里先说一下这两种布局的区别:

    •     百分比宽度布局:宽度使用百分比,文字使用em,更多的使用rem,也就是所说的高清方案。
    •     流式布局:以Google为代表的渐进增强,流式布局,如float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

           接下来回归正题,这两种方式的解决问题是不一样的,自适应是为了解决如何才能在不同大小的设备上呈现相同的页面。手机屏幕的宽度一般在600像素以下,PC一般在1000像素以上,部分配置高的在2000像素以上,那么就让同一张网页自适应不同大小的屏幕,根据屏幕的宽度自动调节网页的内容大小,而它们主题的内容和布局是没有变化的。

    自适应(Adaptive design):不同设备的代码是不一样的,

    响应式(Responsive design):所有设备的代码是一样的。

    • 允许网页的宽度自动的调整
    • 尽量少使用绝对的宽度,多点百分比
    • 相对大小的字体:不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个单位不限制于字体,别的属性也可以这么设置
    • 选择加载CSS,
    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
    意思是如果屏幕宽度小于400像素,就加在tinyScreen.css文件。 

    那么自适应的实现方式有哪些呢?

    • 网页宽度自动调整,在网页代码的头部加入一行代码,
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    viewport是网页默认的宽度和高度,这行代码的意思是网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1),即网页初始大小占屏幕面积的100%。

    • 少使用绝对宽度,使用百分比来替代,当然也可以配合CSS的cal,进行计算宽度。
    • 选择加载CSS,自适应网页的核心是CSS3引入的Media Query模块,它的意思就是自动探测屏幕宽度,然后加载相应的CSS文件,
    <link rel="stylesheet" type="text/css"  
        media="screen and (max-device-width: 400px)"  
        href="tinyScreen.css" /> 
    • CSS的@media规则,同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则,
      @media  screen and (max-device-width: 400px) {  
        
          .column {  
            float: none;  
            width:auto;  
          }  
        
          #sidebar {  
            display:none;  
          }  
        
        } 
    • 图片的自适应,只需要一行代码,img{ max-width: 100%; },这行代码对于大多数嵌入网页的视频也有效,可以写成img,object{ max-width: 100%; },老版本的IE不支持max-width,所以只好写成img{ width: 100%; };此外windows平台缩放图片时,可能出现图片失真现象,可以尝试IE的专有命令,img{ -ms-interpolation-mode: bicubic;},或者Ethan Marcotte的imgSizer.js
      addLoadEvent(function() {  
        
          var imgs = document.getElementById("content").getElementsByTagName("img");  
        
          imgSizer.collate(imgs);  
        
        }); 

    展开全文
  • 最简约大气的自适应响应式)单页网站源码 供初学者参考。
  • 自适应与响应式

    2017-06-01 09:56:00
    自适应使得在任何设备上显示的页面都一样,而响应式会根据不同设备调整页面的样式,比如6张图片在A设备浏览器上分两行显示,每行三张, 而在B设备浏览器上分三行显示,每行两张。响应式的概念覆盖了自适应。 ...
  • 页面适应所有屏幕大小我们自然是用更多的自适应 自适应的作用在于元素大小都是相对屏幕而言的 所以px显然是达不到这...百分比是相当于父级元素的单位 比如 width:100%; 将宽度定义为父级的百分之百 自适应单位 4 rem
  • 浅谈响应式开发与自适应布局!

    千次阅读 2018-05-02 23:41:49
    谈到响应式,大家不自觉的会想到什么? 首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢? 2009时间段,互联网发生了一件天大的事情! 那就是在北京时间2009年6月9日凌晨2...
  • jQuery响应式与自适应代码案例,电脑端、平板端、手机端
  • 在网上经常看到一些博客写到响应式自适应的区别的文章,但是看多了,就会发现很多人说的都不太一样,最后导致自己都没有搞清楚到底什么是响应式布局?什么是自适应布局?所以想在这里对自己的理解做个记录,也方便...
  • 但是要实现它,不仅仅有一种方法可以实现,例如自适应设计和响应式设计,我们将在本文中进行讨论。当用于描述这些技术的术语时,可能会有些混乱。设计和开发的许多方面一样,我们被许多流行词淹没。有时它们变得...
  • 响应式自适应的区别

    万次阅读 2015-06-15 11:34:22
    先给大家体验一下响应式自适应的区别,请放大缩小一下屏幕尝试  自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/  整理了几篇自适应响应式的文章,摘抄并修改了一下,请大家...
  • youlie自适应网站与响应式网站的区别在哪?两者之间有什么区别吗?对于自适应网站与响应式网站的区别,我想很多人都会有所误解,以为两者是是一样的。其实不是,从网站建设的角度来讲自适应网站...
  • 响应式自适应有什么区别?

    千次阅读 2019-09-18 11:28:21
    最近接到的几个页面需求后台都做了自适应布局,这并不是第一次接触到自适应布局和响应式布局等名词,但是没有仔细研究,概念也不是很清晰,对于他们的了解一直是一个懵懂的状态,借此机会自己查阅了很多资料,研究了...
  • 仿新华社官网自适应响应式新闻网站双模板,简洁大气!
  • 自适应其实就是响应式。 目前有区别的是有些网站是移动端和pc端是独立的二级域名,这种站在域名上就有区别比如pc端使用www和移动端使用m两个不同的二级域,这样优化就要优化两个域名 自适应也就是响应式移动端和pc...
  • 响应式布局: 1、保有足够的留白,但也几乎不浪费屏幕面积 2、该考虑的内容:@百分比的布局以及em布局,随屏幕宽度变化的间距 @文本换行 @图片需被替换或允许缩放 @忍受一个不再完美的设计 自适应布局: ...
  • 自适应响应式布局 一、自适应 自适应体验 http://m.ctrip.com/html5/ 自适应:为了解决在不同大小的设备上呈现相同的网页 如何实现 自适应主要是指的宽度的自适应 百分比的流式布局 二、 swiper...
  • 模板名称: 响应式LED显示屏光源类 织梦模板 (自适应手机端)+PC+wap+利于SEO优化 模板介绍: 织梦最新内核开发的模板,该模板属于企业通用类、LED显示屏、光源、照明设备类企业都可使用, 这款模板使用范围极广,不...
  • 响应式布局与自适应布局的区别
  • 响应式自适应区别

    万次阅读 2016-01-24 16:54:04
    先给大家体验一下响应式自适应的区别,请放大缩小一下屏幕尝试  自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/  整理了几篇自适应响应式的文章,摘抄并修改了一下,请...
  • 浅谈自适应与响应式

    2017-02-23 10:49:00
     响应式,是指在网站上的页面,由于采用响应式的布局,也可以在任何设备上无障碍显示,但是网页的样式早已根据响应式的布局该变成专为其他设备所准备的样式。  总结:  自适应,在手机登设备上浏览,网页PC...
  • 这是一款效果非常炫酷的jQuery响应式自适应模态窗口特效插件,该模态窗口插件共有5种特效,当点击特定链接后,模态窗口会后逐渐放大、翻转的动画效果,非常的酷。
  • 先给大家体验一下响应式自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 通俗的说,自适应布局是是为了解决如何才能在不同大小的设备上呈现...
  • html5响应式图片布局自适应浏览器大小图片布局
  • PHPCMS仿极客网模板_自适应响应式HTML5,看见有人放出了这个模板,结果没得下载 后来我就自己下载了极客网的css来配置到phpcms v9上面,结果首页的功能基本上都能实现(加载更多), 我都在怀疑是不是极客网也是用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,729
精华内容 12,291
关键字:

自适应与响应式