移动端rem适配,使用sass自动转化rem

本文介绍了一种响应式布局技术,通过监听窗口大小变化动态调整字体大小,确保不同设备上的显示效果一致。同时,利用SASS的pxTorem函数简化了像素到rem单位的转换过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

根据屏幕宽度设置font-size:

    window.onresize = setFontSize;
    setFontSize();
    function setFontSize() {
        var designWidth = 750;
        var windowWidth = document.documentElement.clientWidth;
        if (windowWidth > designWidth) {
            windowWidth = designWidth;
        }
        document.documentElement.style.fontSize = 30 * (windowWidth / designWidth) + "px";

    }

sass转化单位

$brower_default_font_size: 30px !default;
html{
    font-size: $brower_default_font_size;
}
@function pxTorem($px){
    @return $px / $brower_default_font_size * 1rem;
}

当屏幕宽度为750时,和设计稿宽度一致。此时font-size为30px,若某个元素在设计稿的宽度为30px,按照以前的做法,需要手动计算rem倍数,设置元素宽度为1rem,而使用sass之后,只需调用函数pxToRem(30px),可自动计算出rem。即为30/30*1rem=1rem。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值