CSS中的各种百分比

Posted 2023-04-18

参考技术A 在CSS中经常用到百分比来设置大小，而不同属性在设置百分比时的参考对象不同。以下是比较常见的元素的百分比：

css布局总体

各种布局

• • css发展时间线
  • 固定布局&静态布局（px）
  • 流式布局（百分比、vw/vh-----vw/vh有些浏览器或低版本不兼容）
  • 弹性布局（em/rem、flex）
  • 自适应布局
  • 响应式布局

css发展时间线

时间	新技术
1996	css1
1998	css2
2010	css3、响应式布局
2012	媒体查询
2017	grid

固定布局&静态布局（px）

固定宽度，然后居中。缺点：随着现在屏幕大小的不同化，屏幕太大留白就很多。

流式布局（百分比、vw/vh-----vw/vh有些浏览器或低版本不兼容）

宽高使用百分比，放大缩小。缺点：字体没法百分比调整，宽度太小字体等排版会混乱。

弹性布局（em/rem、flex）

根据根元素字体大小变化，进行缩放。比如高度2rem

自适应布局

宽度变化，进行缩放，样式整体不会有啥变化。缩放之后，要刷新页面才会进行重新布局。（多套代码，分别都是弹性布局或者固定布局，所以地址可能也有变化。相当于多个vue项目）

主要针对（320 480 760 960 1200 1600）六套。一般电商这种页面复杂的，两套就够了。

网站例子：https://www.ui.cn/ 缩小到很小之后,刷新一下会弹到 http://m.ui.cn/，可以看出刷新前一直是4个，刷新后是两个
例子2：亚马逊。

响应式布局

宽度变化，一行可能变两行以上，样式也会发生变化。缩放的同时，直接进行换行等，很丝滑。（一套代码，配合媒体查询）
网站例子：思否，缩小之后，左侧菜单直接收成标签，再缩小，变成横着的菜单。