乐趣区

关于前端:想要学好前端必须理解的布局方式自适应布局

自适应布局

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

什么是自适应布局?

在不同屏幕分辨率下,可能以最佳的形式进行展现,元素的宽度尺寸可能会扭转,然而原有的展现形式不会扭转。通常应用 % 单位来实现自适应布局。

长处

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

毛病

因为开发的时候须要思考多种分辨率下的状况,会额定减少一些工作量。其次是当分辨率过于小时,可能会产生内容的拥挤。不会依据不同分辨率采纳不同的展现形式。

场景

次要兼容不同分辨率设施


根底案例

以下简略模仿一个自适应元素,在不同设施 / 分辨率下展现的成果。

容器尺寸 640px * 320px

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

容器尺寸 150px * 320px

当分辨率改为 150px * 320px 时,也可能失常的展现成果。

容器尺寸 150px * 320px

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


最全面的前端笔记来啦,蕴含了入门到入行的笔记,还反对实时成果预览。小伙伴们不须要再花工夫去写笔记,或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览,深色和浅色模式。

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

退出移动版