Container自适应外容器

2024-06-19 00:27:07首发，1天前更新

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

Container自适应外容器1天前更新

前言

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

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

自适应宽度

对元素使用_container样式类即可表示自适应元素，用户不需要添加其他样式即可在多终端中以良好的显示宽度。在不同终端下保持最优的宽度。

小屏手机端，宽度=100%-(16*2)px
小平板，宽度=100%-(16*4)px
大平板，宽度=100%-(16*6)px
高清平板，宽度=100%-(16*8)px
笔记本电脑/普通桌面显示器，宽度=100%-(14*12)px
2k桌面显示器，宽度=100%-(14*16)px
4k桌面显示器，宽度=100%-(14*20)px

输出
HTML
JS

自适应容器(点击关闭)
```
                
                
            
```

                
                let demo0001 = document.querySelector('#demo0001');
                demo0001btn01.onclick=()=>{
                    demo0001.setAttribute('class','_inset-fixed _inset-sb _w-full');
                }
                demo0001btn02.onclick=()=>{
                    demo0001.setAttribute('class','_d-none');
                }
                demo0001.onclick=()=>{
                    demo0001.setAttribute('class','_d-none');
                }

可选尺寸

单独使用_container样式类仅仅是创建一个自适应终端的容器，规定了容器在不同终端下的最大宽度，我们提供了几个可用于布局的尺寸。

_container-xxs： 600px
_container-xs： 800px
_container-sm： 1000px
_container-md： 1200px
_container-lg： 1400px
_container-xl： 1600px
_container-xxl： 1800px

这几个样式类可作用于平板和桌面设备，如果自适应宽度与该样式类的宽度发生矛盾，将以自适应宽度显示。

比如对容器使用了_container-lg，该容器在大型桌面显示下是可以正常显示的，但是在手机或平板设备中将依照自适应最大宽度显示，而不是按_container-lg所代表的宽度显示。

由于手机屏幕较小，以上样式类在手机设备中将强制以自适应宽度显示（100% - 32px）。

输出
HTML
JS

_container-xxs(点击关闭)

_container-xs(点击关闭)

_container-sm(点击关闭)

_container-md(点击关闭)

_container-lg(点击关闭)

_container-xl(点击关闭)

_container-xxl(点击关闭)
```
                
                
            
```

                
                let demo0002 = document.querySelector('#demo0002');
                demo0002btn01.onclick=()=>{
                    demo0002.setAttribute('class','_inset-fixed _inset-sb _w-full');
                }
                demo0001btn02.onclick=()=>{
                    demo0001.setAttribute('class','_d-none');
                }
                demo0002.onclick=()=>{
                    demo0002.setAttribute('class','_d-none');
                }

自定义宽度

如果css类_container-xxs~xxl不能满足实际需要，可使用css变量自定义宽度。

--_container-w：统一设定各终端宽度，
--_xxs-w：设置手机端宽度
--_xs-w：设置平板端宽度
--_sm-w：设置平板端横屏宽度
--_md-w：设置高清平板端宽度
--_lg-w：设置笔记本电脑和普通桌面端宽度
--_xl-w：设置2k桌面端宽度
--_xxl-w：设置4k桌面端宽度

注意，以上变量设置的宽度，在实际运行中都不会超过自适应宽度。

输出
HTML
JS

宽860(点击关闭)

xs-400,sm-600,md-800(点击关闭)
```
                
                
            
```

                
                let demo0006 = document.querySelector('#demo0006');
                demo0006btn01.onclick=()=>{
                    demo0006.setAttribute('class','_inset-fixed _inset-sb _w-full');
                }
                demo0006btn02.onclick=()=>{
                    demo0006.setAttribute('class','_d-none');
                }
                demo0006.onclick=()=>{
                    demo0006.setAttribute('class','_d-none');
                }

全宽尺寸

使用_container-full将100%铺满。

输出
HTML
JS

全宽容器
```
                
                
            
```

                
                let demo0005 = document.querySelector('#demo0005');
                demo0005btn01.onclick=()=>{
                    demo0005.setAttribute('class','_inset-fixed _inset-sb _w-full');
                }
                demo0005btn02.onclick=()=>{
                    demo0005.setAttribute('class','_d-none');
                }
                demo0005.onclick=()=>{
                    demo0005.setAttribute('class','_d-none');
                }

注意事项

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

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