页面设计——流式布局(LiquidLayout)
2023-05-03 来源:飞速影视
一、布局概念
流式布局也叫百分比布局,也称非固定像素布局或自适应布局。
这种布局的特点是随着屏幕的改变,页面的布局没有发生大的变化,可以进行适配调整,这个正好与响应式布局相补。
优点:元素的宽高用百分比做单位,元素宽高按屏幕分辨率调整,布局不发生变化
缺点:屏幕尺度跨度过大的情况下,页面不能正常显示。
![页面设计——流式布局(LiquidLayout)](http://fs.qqfile.top/re/aHR0cHM6Ly9waWNzNS5iYWlkdS5jb20vZmVlZC9iMTUxZjgxOTg2MTgzNjdhZTFjOTY0ODMxNzM0ZTBkZWIyMWNlNWY5LnBuZ0BmX2F1dG8_dG9rZW49NjVmOWM2NWRmY2NjZDE3OTMzNzJjZThhNTk3YjY3OGU1)
这边引入一下响应式布局:
分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。只是布局改变,元素不变。
![页面设计——流式布局(LiquidLayout)](/images/loading.gif)
静态布局是网页最外层容器有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
二、如何使用
1.基于Layou布局组件:
·子组件宽高设置百分比
![页面设计——流式布局(LiquidLayout)](/images/loading.gif)
本站仅为学习交流之用,所有视频和图片均来自互联网收集而来,版权归原创者所有,本网站只提供web页面服务,并不提供资源存储,也不参与录制、上传
若本站收录的节目无意侵犯了贵司版权,请发邮件(我们会在3个工作日内删除侵权内容,谢谢。)
www.fs94.org-飞速影视 粤ICP备74369512号