布局方式——自适应布局

原文链接:https://note.noxussj.top/?source=nowcoder

什么是自适应布局?

在不同屏幕分辨率下,能够以最佳的方式进行展示,元素的宽度尺寸可能会改变,但是原有的展示方式不会改变。通常使用 % 单位来实现自适应布局。

优点

页面能够兼容不同分辨率的屏幕。

缺点

因为开发的时候需要考虑多种分辨率下的情况,会额外增加一些工作量。其次是当分辨率过于小时,可能会发生内容的拥挤。不会根据不同分辨率采用不同的展示方式。

场景

主要兼容不同分辨率设备


基础案例

以下简单模拟一个自适应元素,在不同设备/分辨率下展示的效果。

容器尺寸 640px * 320px

alt

元素的宽度是自适应的,根据父级容器宽度决定。

容器尺寸 150px * 320px

alt

当分辨率改为 150px * 320px 时,也能够正常的展示效果。

容器尺寸 150px * 320px

alt

像这种元素多并且容器的尺寸也过于小时,就会导致内容拥挤。


原文链接:https://note.noxussj.top/?source=nowcoder

全部评论
自适应布局也能用在传统web网站吗?
点赞 回复 分享
发布于 2023-03-25 12:36 山东
这个更适应我现在的项目😁
点赞 回复 分享
发布于 2023-03-25 12:51 山东

相关推荐

11-24 11:23
门头沟学院 C++
点赞 评论 收藏
分享
qz鹿:*** 祝他毕业就失业
点赞 评论 收藏
分享
11-22 16:49
已编辑
北京邮电大学 Java
美团 质效,测开 n*15.5
点赞 评论 收藏
分享
评论
点赞
2
分享
牛客网
牛客企业服务