深入理解 rem 适配：从理论到实践的完整指南

// meta viewport 配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

// 使用 vw 进行适配
.container {
    width: 100vw;
    height: 100vh;
    font-size: 4vw;
}
 
// 结合 calc 使用
.element {
    width: calc(100vw - 20px);
    padding: calc(5vw + 10px);
}

.parent {
    width: 100%;
    
    .child {
        width: 50%;  // 相对父元素宽度
        height: 0;
        padding-bottom: 50%;  // 实现正方形
    }
}

.container {
    display: flex;
    flex-wrap: wrap;
    
    .item {
        flex: 0 0 50%;  // 两列布局
        // 或者使用 calc
        flex: 0 0 calc(50% - 10px);  // 考虑间距
    }
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.container {
    // 使用 rem 控制整体缩放
    width: px2rem(750px);
    
    // 内部使用 flex 布局
    display: flex;
    justify-content: space-between;
    
    .item {
        // 使用 vw 控制大小
        width: 30vw;
        
        // 文字使用 px
        font-size: 16px;
        
        // 使用 transform 处理 1px 问题
        border: 0.5px solid #000;
        @media (-webkit-min-device-pixel-ratio: 2) {
            border-width: 0.5px;
        }
    }
}

// 断点管理
$breakpoints: (
    'phone': 320px,
    'tablet': 768px,
    'desktop': 1024px
);
 
// 混合宏
@mixin respond-to($breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
    
    @media screen and (min-width: $value) {
        @content;
    }
}
 
// 使用示例
.element {
    font-size: px2rem(28px);
    
    @include respond-to('tablet') {
        font-size: px2rem(32px);
    }
    
    @include respond-to('desktop') {
        font-size: px2rem(36px);
  }
}