非你网

在做一些特殊的展示的网站的时候，只需要按照一定比例的缩放就可以。这种不像栅格化的自适应（比如 bootstrap），这种也更好写。按照设计图的尺寸，换算做出来就可以。下边有两种方案。

https://juejin.cn/post/6966103143402700837

上边链接介绍的是满屏的自适应缩放。有的时候，是根据宽度做自适应。就是设计页高度远远大于宽度的情况。这个时候，只需要按照宽度自适应就可以。其实，还是用到上边的思路。采用上边的第二种方案，使用 rem 自适应。只是计算方法稍微改变一下。

# js
function setFontSize() {
    const designWidth = 1440
    const fontSize = document.documentElement.clientWidth < designWidth ?
                12 * (document.documentElement.clientWidth / designWidth) : 12

    const htmlElement: HTMLHtmlElement | null = document.querySelector('html')
    if (htmlElement) {
        htmlElement.style.fontSize = fontSize + 'px'
    }
}

# scss
$design_width: 1440; //设计稿的宽度，根据实际项目调整

@function px2rem($px) {
    $design_font_size: 12;
    @return ($px/$design_font_size) + rem;
}

这个时候，似乎和高度已经没有关系了。

在这个情况下，如果媒体宽度大于设计图的宽度，内容宽度就是设计图宽度。对内容做居中处理。

# bootstrap 居中就是这么写的
margin-left: auto;
margin-right: auto;

# dom 结构
<div class="full-container">
    <div class="design-wrap">

    </div>
</div>