css html 移动端适配 font-size: 13.33vw rem + vw


#### 使用 `vw` 实现响应式布局

方法一:使用CSS计算功能

这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。
/* 
根据750宽度的设计稿计算font-size,即1rem = 100px;
*/
html {
    font-size: calc(100vw / 7.5);
}
这种方法的好处是可以在不需要JavaScript的情况下实现响应式设计。

方法二:基于设计稿宽度计算

这种方法是通过手动计算设计稿的宽度与`vw`单位的关系来设置`font-size`的值。
/* 
基于750宽度的设计稿,1rem = 100px;
*/
html {
    font-size: 13.333333333vw;
}

/* 
基于650宽度的设计稿,1rem = 100px;
*/
html {
    font-size: 15.38461vw;
}

方法三:使用JavaScript动态调整font-size

使用JavaScript动态地调整`font-size`可以更好地控制布局,在特定条件下更改`font-size`。
(function (window, document) {

    let getRem = function () {
       if (document) {
          let html = document.documentElement;
          let width = html.getBoundingClientRect().width > 750 ? 750 : html.getBoundingClientRect().width;
          let hWidth = width * (750 / 352);
          html.style.fontSize = Math.ceil(hWidth / 16) + "px";
       }
    };
    
    getRem();
    
    window.onresize = function () {
       getRem();
    }

})(window, document);


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM