设计好的PC端应用，需要熟悉并充分利用电脑特性，这些特性包括硬件特征、使用方式、交互方式、使用场景等。
面对日益复杂的屏幕尺寸，设计的核心挑战在于保障体验的连续性。我们需要在遵循设备屏幕特征的同时，确保应用内的操作流畅与视觉统一。本文将带大家回顾UI布局的发展历程，并深入拆解六种基础布局模式，帮助大家关注细节，打磨出更精致、更具适应性的产品。
一、布局的发展历程
网页布局技术是一步一步迭代过来的。了解相关的发展节点，能帮我们更好地应用这些布局。
1996年：静态起步（CSS1 时代）CSS（一种计算机语言，网页的字体、间距和颜色等样式都是CSS写的）的诞生让网页有了样式。那时的设备尺寸单一，网页就像电子报纸，布局是静态且固定的。
多端适配并非单纯依赖某一种技术，而是通过灵活组合 固定、流式、弹性、自适应、响应式、网格 这六种基础布局，辅以断点与栅格系统来实现。
我们将这六种布局分为“基础构成”与“进阶适配”两个阶段来理解。
上述三种基础布局 是构建界面的微观基础，它们决定了元素在容器内如何排列。他们不是单一的工具，而是一种方法，网页是各种盒子拼套起来的，从设计师视角看就是不同的功能模块，可能某处主张美观用弹性布局，另一处重视精准传达用静态更好，实操中是可以混合使用的。
随着 CSS3 媒体查询技术的引入，我们将上述基础布局与“断点系统”结合，当屏幕宽度跨越特定阈值时，布局发生结构性改变（如从单列变为三列），从而诞生了以下三种进阶模式：
随着终端设备形态日益多样化（折叠屏、超宽带鱼屏等），UI 设计师需要建立更全局的视角，充分考虑安全区（Safe Area）及避让区属性，灵活适配不同的屏幕方向与设备类型。
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問
