移动端html font-size动态计算设置

最新推荐文章于 2024-01-25 17:20:40 发布

原创最新推荐文章于 2024-01-25 17:20:40 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

记录专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种使用REM单位实现响应式布局的方法，确保设计稿在不同设备上保持一致的比例。通过动态调整HTML的字体大小，使得设计元素在各种屏幕尺寸下都能保持预期的视觉效果。

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

设计稿以750px为宽度，其中有个元素是100px，如何设置font-size，使同一段代码在不同的设备上保持一致？

设计稿宽度	设备宽度	html font-size	元素宽度	css代码
750px	320px(iphone5)	?	100px	1rem
750px	375px(iphone6/7\iphoneX)	50px	100px	1rem
750px	414px(iphone6P/7P	?	100px	1rem

通过上面的表格可以得出，只要每个设备计算出font-size几个适配。
375/50=7.5 => 414/?=7.5 => 每个设备动态计算设备宽度/7.5即可。

(function () {
            function resizeBaseFontSize() {
                var rootHtml = document.documentElement,
                    deviceWidth = rootHtml.clientWidth;
                if (deviceWidth > 640) {
                    deviceWidth = 640;
                }
                rootHtml.style.fontSize = deviceWidth / 7.5 + "px";
            }
            resizeBaseFontSize();
            window.addEventListener("resize", resizeBaseFontSize, false);
            window.addEventListener("orientationchange", resizeBaseFontSize, false);
        })();

示例：

//网页html部分，js部分同上
<style>
        * {
            padding: 0px;
            margin: 0px;
        }
    </style>
    <div style="width:1rem;height:1rem;background: black;font-size:0.3rem;color:aliceblue;">宽：1rem</div>
    <div style="width:2rem;height:1rem;background: orange;font-size:0.3rem;color:aliceblue;">宽：2rem</div>
    <div style="width:4rem;height:1rem;background: green;font-size:0.3rem;color:aliceblue;">宽：4rem</div>
    <div style="width:6rem;height:1rem;background: yellowgreen;font-size:0.3rem;color:aliceblue;">宽：6rem</div>
    <div style="width:7.5rem;height:1rem;background: red;font-size:0.3rem;color:aliceblue;">宽：7.5rem</div>
    <div style="width:100%;">
            范德萨范德萨范德萨范德萨范德萨范德萨范德萨范德萨范德萨
    </div>

iphone5/SE

image.png

iphone6/7

iphone6P

可以看到我们的页面font-size是自动变化的（根据对应的设备宽度），并且页面的比例保持不变。以后我们只要保持设计稿是750px宽度，设计稿里面的元素，如果是100px，那么在css中就写1rem，以此类推，如果是12px，那么就是0.12rem。就是：设计稿元素尺寸/100

以下为设计稿要求：

设计稿宽度：750px
css全部采用rem
html的font-size动态计算：设备宽度/7.5
元素尺寸计算为：设计稿尺寸（px）/100 ，（注意单位为rem）

更新最新的vw布局方式，淘宝前端布局已经不维护了

在前端开发中实战

//vue示例
<style scoped lang="stylus">
//定义一个方法用来从px转vm
  p2v(p)
    p / 750 * 100vw;//假设设计稿是750宽度
  $orange = #ff7000
  .banks
    padding p2v(12)//此处计算得是1.6vw，把页面拉伸到750px宽度下，box显示12px
    border 1px olid $orange
    box-shadow 1vw 1vw 1vw $orange
    li
      color $orange
      width p2v(375)//此处计算得是50vw，把页面拉伸到750px宽度下，box显示375px