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

自适应布局

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

什么是自适应布局？

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

优点

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

缺点

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

场景

主要兼容不同分辨率设备

---

基础案例

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

容器尺寸 640px * 320px

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

容器尺寸 150px * 320px

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

容器尺寸 150px * 320px

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

---

最全面的前端笔记来啦，包含了入门到入行的笔记，还支持实时效果预览。小伙伴们不需要再花时间去写笔记，或者是去网上找笔记了。面试高频提问和你想要的笔记都帮你写好了。支持移动端和 PC 端阅读，深色和浅色模式。

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