• 响应式和自适应(Responsive design 和 Adaptive design)


    前二天做了几个手机端页面,本来用CSS3的@media 但因为对它还不是很了解,调试多次不成功。因为时间比较赶,为了实现最终的页面效果,我用JS去获取了屏幕的大小去控制了最终的字体大小。

    做完后闲下来我查了一下资料,更加深入的去了解了一下何为响应式。发现原来我最终的页面,只能叫自适应,而不叫响应式。对于页面来说 没有实际上显示的问题(经过查资料显示貌似自适应比响应式更完善)不过我的初衷还是做响应式,在做响应式遇到问题时临时做的自适应。

    响应式的基本概念是:

      简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。  ——来源(百度)

    (采用 CSS 的 media query 技术,配合流体布局( fluid grids )和同样可以自适应的图片/视频等资源素材。以上所说,都是通过 HTML 和 CSS 就能完成的。一般来说,响应式 倾向于只改变元素的外观布局,而不大幅度改变内容。Jeffrey Zeldman 总结说,我们就把 自适应 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术吧。   ——来源(知乎上的回答)

    自适应的解释:

      Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 自适应 在包括 响应式 的 CSS media query 技术以外,也要用 Javascript 来操作 HTML 来更适应移动设备的能力。自适应 有可能会针对移动端用户减去内容,减去功能。自适应 可以在服务器端就进行优化,把优化过的内容送到终端上。自适应 通常会牵扯到另外一个词 “progressive enhancement” 。
    progressive enhancement:从针对最低端的,最低分辨率的设备的设计做起,逐步逐步为更高阶的设备增加功能和效果的做法。(换个角度说,也就是相当于为移动设备减去功能)  

    还有一种说法:

    响应式 一般来说需要在网页设计初期就开始(通常采用 mobile first 策略),所以旧的网站要做 响应式很可能要完全重建。而 自适应 则采用保留现有桌面网站( desktop version )而对于更小的分辨率做针对性的优化(适应),这点对于很多老的网站来说很重要,因为重构成本太大。

    为什么我的@media screen出现问题,我还在查找总结问题。 大概是我在做屏幕尺寸判断时有问题。 最近 再做测试 做一个完整的@media screen 一些尺寸判断。 再加深一下对screen的尺寸的理解

  • 相关阅读:
    Lua 的元表怎么理解
    Lua中的元表与元方法
    Lua 的元表怎么理解
    VMware Workstation 系统备份-虚拟机克隆方法
    Lua中的元表与元方法
    bzoj2809
    bzoj2733
    bzoj1334
    bzoj1211
    bzoj3083 3306
  • 原文地址:https://www.cnblogs.com/maixi/p/4609960.html
Copyright © 2020-2023  润新知