首页相关资讯自适应网站_响应式网站_响应式和自适应的区别
自适应网站_响应式网站_响应式和自适应的区别

响应式

  1. 只需开发一套界面。
  2. 对页面做的屏幕适配是在一定范围:比如pc端(>1024)一套适配,平板(768-1024)一套适配,手机端(< 768)一套适配;响应式一套页面全部适配。(可以想象:响应式设计要考虑的内容要比自适应设计复杂的多)
  3. 建立一个网页,通过CSS Media Query,Content - Based Breakpoint等技术来改变网页的大小适应不同分辨率的屏幕。

自适应

  1. 需要开发多套界面
  2. 通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。
  3. 为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。

区分响应式和自适应

  1. 在电脑端使用浏览器chrome或edge打开网址。
  2. F12 或 右键鼠标 选择 检测
  3. 点击面板左上角里的设备切换图标,如下图

  1. 切换后,
    电脑端和手机端显示的布局自动切换,就是响应式,例如本站;
    如果布局没有自动适配,刷新页面后布局才切换适配(网址跳转或没有跳转),就是自适应,例如百度;
    如果刷新也没有切换,既不是响应式也不是自适应,也就没有适配不同设备。

建议

  • 开发角度:单页面,功能复杂,采用自适应;功能简单,采用响应式。
  • SEO角度:搜索引擎普遍偏爱响应式。

总结

  • 响应式:一套模板;由前端适应,不同分辨率模板合并在一个页面,下载一页模板就一个页面。
  • 自适应:多套模板;由后端适应,每一个分辨率模板一个页面,分别下载不同分辨率模板。
软件应用:前端模板下载;开发设计;SEO优化;离线浏览网页。备注:本软件不是黑客程序,不能下载后台数据!
免责声明:服务用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯本网站及相关权利人的合法权利,通过使用本站工具随之而来的风险与本软件无关。
Copyright © 2019-2022 小飞兔软件 All Rights Reserved 粤ICP备19111427号-2
教程资讯 在线文档 网站专题