43、移动端REM、VW布局

[CodingMeUp]

rem flexiable 有1px问题 在REM布局中处理1px问题是用了视窗缩放的方案，在VW布局中就不用了，转而使用容器缩放（transform）的方案 考虑 viewport兼容性越来越好 迁移VW

/* 移动端页面设计稿宽度 */
$design-width: 750;
/* 移动端页面设计稿dpr基准值 */
$design-dpr: 2;

/*
    vw与px对应关系，100vw为视窗宽度，$vw即为$px对应占多宽

        $px                    $vw
    -------------    ===    ------------
    $design-width              100vw
*/

/* 单位px转化为vw */
@function px2vw($px) {
    @return ($px / $design-width) * 100vw;
}

/* 单位vw转化为px，可用于根据vw单位快速计算原px */
@function vw2px($vw) {
    @return #{($vw / 100) * $design-width}px;
}

height: px2vw(300);

1. 方案选择

方案是挺多的，可能也不够完善。要选哪种方案呢？

每个方案都能保证在不同机型下做到一定的适配。

1. 一般来说，可用直接考虑使用REM布局

2. 因REM使用了JS动态设置html的font-size，且scale对安卓机型不太友好，要求极致的可以选用VW

3. 纯VW布局不支持设置容器最大最小宽高，如果需要此功能则选用 REM + VW布局

https://cloud.tencent.com/developer/article/1352187

1 伪元素 + transform scaleY(.5) 2 border-image 3 background-image 4 box-shadow