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);

posted on 2021-10-27 21:26  完美前端  阅读(1121)  评论(0)    收藏  举报

导航