css布局在不同屏幕下如何调整列宽

box-sizing: border-box</font>
<font>• 缺点是难以精确控制间距和最小/最大宽度</font>

<H3>采用Flexbox弹性布局</H3>
<p>Flexbox 能轻松实现动态分配空间，特别适合多列自适应场景。</p>
<font>• 父容器设置 <strong>display: flex</strong></font>
<font>• 子项使用 <strong>flex: 1</strong> 均分宽度，或用 <strong>flex: 2 1 0</strong> 控制伸缩比例</font>
<font>• 可结合 <strong>flex-wrap: wrap</strong> 实现换行</font>
<font>• 支持 <strong>min-width</strong> 和 <strong>max-width</strong> 限制列宽范围</font>

<H3>使用CSS Grid网格布局</H3>
<p>Grid 提供更强大的二维布局能力，适合复杂结构。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/2534">
                            <img src="https://img.php.cn/upload/webcode/000/000/000/5a2a2bf92aa08363.png" alt="侧栏菜单模块化响应式模板">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/2534">侧栏菜单模块化响应式模板</a>
                            <p>响应式网站设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="侧栏菜单模块化响应式模板">
                                <span>58</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/2534" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="侧栏菜单模块化响应式模板">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<font>• 使用 <strong>grid-template-columns</strong> 定义列宽</font>
<font>• 用 <strong>fr</strong> 单位按比例分配剩余空间（如 <code>1fr 2fr