【Web】几种布局方式_web控件布局-优快云博客

布局类型	说明
1. 固定布局（静态布局） Static Layout	特点说明：静态布局是指在制作网页时，页面元素的位置、大小固定不变的布局方式。一般来说，静态布局使用固定的像素值（px）设置元素的宽度和高度，并固定元素的位置。这种布局方式不能随着浏览器窗口大小的变化而变化，而是固定在浏览器窗口中的某一位置。优点：布局简单，容易控制缺点：不适用于不同尺寸的设备，布局难以适应屏幕变化，无法有效提高用户体验。
2. 流式布局	流式布局（Fluid Layout）是一种使用相对单位（百分比%）来设置页面元素的宽度和高度的布局方式。它通过使用相对单位来适应不同屏幕大小，从而实现自适应效果。
3. 弹性布局	在之前CSS的学习中，弹性布局这个词已经并不陌生了。其中以em（以字体大小为基准）和rem（以html根级元素字体大小为基准）两种相对单位最为有特色。因此，弹性布局的“弹性”就是用来形容整个内容大小以字体大小作为基准，像个橡皮筋一样弹来弹去的设计效果。类似于在Figma中摁K等比缩放的感觉。
4. 自适应布局	预设了一些布局模板，根据用户的机型来判断用户需要哪个模板。但是没有一镜到底的特点，也就是说，当页面窗口开得小的时候，布局会一直等比缩放，在这个时候只有刷新它才会重新读取页面并进行自适应。我们国内的网站大部分用的都是这种布局。优点就是加载的少，因为是对设备尺寸做的针对性设计，所以不需要被加载的直接会被砍掉。缺点就是维护成本高
5. 响应式布局	根据页面的不同宽度来自动调整内容的大小以适应用户的屏幕，包括手机、平板，电脑等。拥有一镜到底的特点。讲到响应式布局，就不得不谈到断点。（待更新）国外的网站大部分用的都是这种布局。按照未来的发展趋势来说，响应式会更拥有发展潜力。在 CSS 中，可以使用以下几种方法实现响应式布局： 1. 使用媒体查询：通过检测屏幕的宽度和高度，来定制不同的样式。 2. 使用流动布局：让元素的宽度随着父容器的变化而变化，从而适应不同的屏幕尺寸。 3. 使用百分比布局：将元素的宽度和高度设置为百分比，从而适应不同的屏幕尺寸。 4. 使用视口单位（vw 和 vh vmin vmax）：将元素的宽度和高度设置为基于视口的单位，从而适应不同的屏幕尺寸。