Container自适应外容器

2024-06-19 00:27:07首发，23小时前更新

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

前言

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

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

简单使用

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

输出
HTML

并不在最外层，所以其真实宽度是100%（相对父容器）
```
                
                
            
```

小尺寸

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

演示示例

默认平板竖手机竖

大尺寸

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

演示示例

默认平板竖手机竖

注意事项

因为_container是通过媒体查询screen的宽度而实现自适应宽度，所以_container样式类只适合应用在父层为body或者与body同宽的节点下面。基本结构如下：

   
                    <html>
                        <body>
                            <div class="_container"></div>
                            <div style="width:100%">
                                <div class="_container"></div>
                            </div>
                        </body>
                    </html>