自适应网站_响应式网站_响应式和自适应的区别
响应式
- 只需开发一套界面。
- 对页面做的屏幕适配是在一定范围:比如pc端(>1024)一套适配,平板(768-1024)一套适配,手机端(< 768)一套适配;响应式一套页面全部适配。(可以想象:响应式设计要考虑的内容要比自适应设计复杂的多)
- 建立一个网页,通过CSS Media Query,Content - Based Breakpoint等技术来改变网页的大小适应不同分辨率的屏幕。
自适应
- 需要开发多套界面
- 通过检测视口分辨率,来判断当前访问的设备是:pc端、平板、手机,从而请求服务层,返回不同的页面;响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。
- 为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。
区分响应式和自适应
- 在电脑端使用浏览器chrome或edge打开网址。
- 按
F12
或 右键鼠标 选择 检测
。 - 点击面板左上角里的
设备切换图标
,如下图
- 切换后,
电脑端和手机端显示的布局自动切换,就是响应式
,例如本站;
如果布局没有自动适配,刷新页面后布局才切换适配(网址跳转或没有跳转),就是自适应
,例如百度;
如果刷新也没有切换,既不是响应式也不是自适应,也就没有适配不同设备。
建议
- 开发角度:单页面,功能复杂,采用自适应;功能简单,采用响应式。
- SEO角度:搜索引擎普遍偏爱响应式。
总结
- 响应式:
一套模板
;由前端适应,不同分辨率模板合并在一个页面,下载一页模板就一个页面。 - 自适应:
多套模板
;由后端适应,每一个分辨率模板一个页面,分别下载不同分辨率模板。