页面自适应方案
基于 rem 实现
- postcss pxtorem 通过插件实现 ,使用该插件可以实现 页面调整大小的 同时 整个页面等同于 按同比例缩放,通过 改变 根元素的font-size 来实现;
- 使用scss 函数实现
scss
$rootFontSize: 12px;
@function pxtorem($px){
@return $px / $rootFontSize * 1rem;
}
基于vw 实现
- 使用vw vh 实现,通过 改变 根元素的font-size 来实现;
- 使用scss 函数实现
scss
$rootFontSize: 12px;
@function pxtovw($px){
@return $px / $rootFontSize * 1vw;
}
$rootFontSize: 12px;
@function pxtovh($px){
@return $px / $rootFontSize * 1vh;
}
实现自适尺寸 仅是尺寸问题 不改变布局 使用相对单位 是可以实现的
当然如果需要根据不同的尺寸动态调整 页面的的布局 可以使用媒体查询 来实现