移动端推荐使用border-box盒模型，通过设置box-sizing: border-box可将padding和border包含在宽高中，避免布局溢出；结合vw单位与viewport元标签，能实现响应式设计并适配不同屏幕尺寸，提升跨设备兼容性。
在移动端开发中，CSS盒模型直接影响页面布局的呈现效果和适配能力。理解并合理使用盒模型，是实现响应式设计和跨设备兼容的关键一步。
标准盒模型与IE盒模型的区别
默认情况下，CSS使用标准盒模型：元素的width和height只包含内容区域，不包括padding和border。这意味着设置width: 100px; padding: 10px; 后，实际占用宽度为120px（100 + 10×2），在小屏幕设备上容易导致溢出或滚动条意外出现。
而IE盒模型（通过box-sizing: border-box设置）将padding和border包含在width和height之内。此时width: 100px; padding: 10px; 实际内容区会自动压缩为80px，总宽仍为100px，更适合移动端精确控制布局尺寸。
移动端推荐使用border-box
为了简化布局计算、避免横向溢出，建议在移动端项目中全局设置：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after { box-sizing: border-box; }这样所有元素都采用IE盒模型，开发者可以更直观地设定组件尺寸，尤其在使用百分比布局、弹性盒子或栅格系统时，能确保填充和边框不会破坏整体结构。
结合视口单位实现响应式尺寸
利用vw（视口宽度单位）配合border-box，可实现真正适配不同屏幕的盒子。例如：
.card { width: 90vw; padding: 16px; margin: 20px auto; }这个卡片在任何设备上都会保持左右留白安全距离，内边距不影响总宽计算，内容区自动调整，避免了传统模型下因padding导致超出屏幕的问题。
处理retina屏与物理像素差异
高倍屏下CSS像素与设备像素存在缩放关系，虽然盒模型本身不直接处理像素密度，但正确设置viewport meta标签至关重要：
<meta name="viewport" content="width=device-width, initial-scale=1">它确保CSS中的尺寸基于设备逻辑像素计算，使盒模型的布局结果在各种DPR屏幕上保持一致视觉大小。
基本上就这些。掌握box-sizing的使用，结合现代布局方式，能让移动端页面更稳定、更易维护。
