各端分辨率
pc端(>1024)
平板(768-1024)
手机端(<768)
响应式布局
只需要编写一套代码,根据设备分辨率,进行页面排版布局调整。
调整思想一般是排版换行、内容精简、调整大小等方式。
常用的实现方式是,使用@media媒体查询,配合vh/vw/%/em/rem等不同单位计算方式来实现,或者使用UI框架(Bootstrap、ElementUI、Ant Design等)响应式栅格布局。
优点:只需要开发一套代码,方便维护,需求更改易于调整
缺点:对开发人员的技术要求更高,需要反复测试调整,以适配各分辨率设备
自适应布局
开发多套代码,根据设备分辨率,返回适合当前设备的页面内容。
优点:页面适配的分辨率跨度相对较小,展示的内容和设计更加灵活,可以关注到细节上的处理
缺点:需要开发几套代码,开发成本更高