*自适应布局
自适应布局是网页内容根据设备的不同而进行适应;
通过检测视口分辨率,来判断当前访问的设备是pc端、平板还是手机,从而请求服务层,返回不同的页面;
需要根据不同使用场景开发多套界面。
🖥技术原理
分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。
🔸布局特点:屏幕分辨率变化时,页面里面元素的位置会变化,而大小不会变化。
🔸设计方法:使用媒体查询给不同尺寸和介质的设备切换不同的样式,在同一个设备下实际还是固定的布局。
*响应式布局
响应式布局是网页的布局针对屏幕大小的尺寸而进行响应;
通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;
只需要开发一套界面即可适用于所有尺寸及终端。
🖥 技术原理
糅合了流式布局+弹性布局,再搭配媒体查询技术使用。
分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,使页面元素宽度随着窗口调整而自动适配。
即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
🔸布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
🔸设计方法:媒体查询+流式布局。
通常使用媒体查询和网格系统配合相对布局单位进行布局,实际上就是综合响应式、流动等技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
————————————————
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_41742961/article/details/118971973
- Android avax.net.ssl.SSLPeerUnverifiedException: No peer certificate 解决方法(httpClient支持HTTPS的访问方式)(1841)
- Android进阶(二)https请求No peer certificate的解决方法.(1206)
- Android进阶(一)几种网络请求方式详解(792)
- Android Can't create handler inside thread that has not called Looper.prepare()错误解决方法(636)
- AndRoid解决ArrayList的Add总是添加相同值的问题(625)
- Android几种邮件发送代码(624)
- 响应式布局和自适应布局的区别(32)
- 1. Windows Server 2008 R2永久激活及Chew-WGA v0.9下载(10657)
- 2.Visual Studio 2017中安装visualSVN及使用详解(3997)
- 3.完美解决iis下JWplayer提示Error loading media: File could not be played错误(3161)
- 4.asp.net mvc+jquery easyui开发基础(一)模块首页及增加、修改、删除模块实现(2273)
- 5..Net Mvc中使用Jquery EasyUI控件讲解(一)表格控件datagrid使用介绍(2045)
- 6.asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发(七)权限管理模块之系统菜单动态生成(2004)
- 7.asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发(三)登录模块开发(1929)
- 8.Android avax.net.ssl.SSLPeerUnverifiedException: No peer certificate 解决方法(httpClient支持HTTPS的访问方式)(1841)
- 9. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发(六)权限管理模块之初始数据准备(1692)
- 10.asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发(八)权限管理模块之权限管理实现(1628)