自适应:需要开发多套界面,通过检测视口分辨率,请求服务器,返回不同的页面
1. 可表现为:
非同一终端,通过服务器端处理,当你PC端访问移动端网站(在移动端网站做navigator浏览器对象处理)时,会返回PC端相应页面;
移动端访问PC端页面(在PC端网站做navigator浏览器对象处理)时,会自动返回移动端相应页面
其实访问的是两个页面(地址栏显示两个路径,当然也就是两套CSS);
同一终端,展现样式一样,无变化;如PC端打开 m.taobao.com ,F12,无论手机模式下,
还是非手机模式下展现给用户的样式都是一样的。
2.优点:兼容性更大,代码更高效。
3.缺点:当需求改变时,可能要改动多套代码。
响应式:一个页面一套CSS(处理了多种分辨率下的不同情况),根据不同的屏幕分辨率,加载不同分辨率下的的CSS,针对不同客户端在客户端做代码处理,来展现不同的布局和内容,如 商汤科技等https://www.sensetime.com/。
1.表现为:
无论是PC端还是移动端访问的都是一个页面,只是展现了不同的页面样式;
2.优点:面对不同分辨率设备灵活性强;
3.缺点: 适用于简单的门户型网站。兼容的各种设备的工作量大,效率低;代码累赘,会出现隐藏元素,加载时间长。折中的设计解决方案。
无论PC端还是移动端访问的都是一个页面(地址栏路径未发生变化)