页面自适应方案

上次更新 2024年10月11日星期五 16:27:10 字数 0 字 时长 0 分钟

基于 rem 实现

• postcss pxtorem 通过插件实现 ，使用该插件可以实现 页面调整大小的 同时 整个页面等同于 按同比例缩放，通过 改变 根元素的font-size 来实现；
• 使用scss 函数实现

$rootFontSize: 12px;
@function pxtorem($px){
    @return $px / $rootFontSize * 1rem;
}

基于vw 实现

• 使用vw vh 实现，通过 改变 根元素的font-size 来实现；
• 使用scss 函数实现

$rootFontSize: 12px;
@function pxtovw($px){
    @return $px / $rootFontSize * 1vw;
}

$rootFontSize: 12px;
@function pxtovh($px){
    @return $px / $rootFontSize * 1vh;
}

实现自适尺寸 仅是尺寸问题 不改变布局 使用相对单位 是可以实现的

当然如果需要根据不同的尺寸动态调整 页面的的布局 可以使用媒体查询 来实现