自适应布局
原文链接:https://note.noxussj.top/?source=zhihu
什么是自适应布局?
在不同屏幕分辨率下,可能以最佳的形式进行展现,元素的宽度尺寸可能会扭转,然而原有的展现形式不会扭转。通常应用 % 单位来实现自适应布局。
长处
页面可能兼容不同分辨率的屏幕。
毛病
因为开发的时候须要思考多种分辨率下的状况,会额定减少一些工作量。其次是当分辨率过于小时,可能会产生内容的拥挤。不会依据不同分辨率采纳不同的展现形式。
场景
次要兼容不同分辨率设施
根底案例
以下简略模仿一个自适应元素,在不同设施 / 分辨率下展现的成果。
容器尺寸 640px * 320px
元素的宽度是自适应的,依据父级容器宽度决定。
容器尺寸 150px * 320px
当分辨率改为 150px * 320px 时,也可能失常的展现成果。
容器尺寸 150px * 320px
像这种元素多并且容器的尺寸也过于小时,就会导致内容拥挤。
最全面的前端笔记来啦,蕴含了入门到入行的笔记,还反对实时成果预览。小伙伴们不须要再花工夫去写笔记,或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览,深色和浅色模式。
原文链接:https://note.noxussj.top/?source=zhihu