Wrap外容器

2024-06-19 00:27:07首发，2个月前更新

网页内容始终需要规划在一个范围内，这个范围我们称之为外容器，外容器即是包裹所有内容的容器，也是实现内容自适应伸缩的有效方法；也就是说当用户将简单快速的实现内容终端自适应，直接套一层wrap外容器即可；外容器支持多个固定尺寸适应不同尺寸桌面终端

前言

内容最外层容器需要适应终端屏幕尺寸，以实现自适应布局，尽量合理的显示多的内容。本框架使用_wrap样式类表示外层自适应容器，他具备几个特点：

1. 有三个计量值，分别是：固定宽度值，相对整个屏幕的宽度值，相对父容器的宽度值，取其中最小值作为外容器的宽度值
2. 支持多尺寸外容器，分别是_wrap-xxs(600px)、_wrap-xs(1800px)、_wrap-sm(1000px)、_wrap-md(1200px)、_wrap-lg(1400px，默认)、_wrap-xl(1600px)、_wrap-xxl(1800px)
3. 在移动终端，即屏幕宽度小于1200px时，外容器会以（100vw-边距）作为宽度
4. 如果把外容器置于其他有宽度值的容器内，外容器的真实宽度值可能是100%
5. 布局方式默认为display:block，用户可覆盖定义为flex布局

简单使用

对元素使用_wrap样式类即可表示自适应元素，本例置于其他元素内部，所以其真实宽度为父容器的有效宽度。

小尺寸

_wrap-xxs、_wrap-xs、_wrap-sm、_wrap-md均为小尺寸容器，其中_wrap-md(1200px)适合用在普通笔记本电脑终端（宽度1360px或1440px）的外容器。

大尺寸

_wrap-lg、_wrap-xl、_wrap-xxl、为大尺寸容器，其中_wrap-lg(1400px)为默认尺寸，可简写为_wrap。