动态设置html的font-size值

博客提及了PC端和移动端相关内容,还给出了相关文档链接http://www.aliued.com/?p=3166 ,以及转载来源https://www.cnblogs.com/guojbing/p/10783875.html 。

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

PC端

(function () {
    function setRootFontSize() {
        let rem, rootWidth;
        let rootHtml = document.documentElement;
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        // 19.2 = 设计图尺寸宽 / 100( 设计图的rem = 100 )
        rem = rootWidth / 19.2;
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
})();

移动端

 (function () {
    function setRootFontSize() {
        let dpr, rem, scale, rootWidth;
        let rootHtml = document.documentElement;
    
        dpr = window.devicePixelRatio || 1; //移动端必须设置
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
        rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100(设计图的rem = 100)
        scale = 1 / dpr;
    
        // 设置viewport,进行缩放,达到高清效果 (移动端添加)
        let vp = document.querySelector('meta[name="viewport"]');
        vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
    
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`;
    }
    setRootFontSize();
    window.addEventListener("resize", setRootFontSize, false);
    window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();

相关文档: http://www.aliued.com/?p=3166

转载于:https://www.cnblogs.com/guojbing/p/10783875.html

<think>好的,用户问的是关于font-size设置的单位有哪些。之前他们问过设置过小不生效的问题,现在可能是在调整字体大小时遇到了类似的问题,比如设置的字体太小没有效果,所以想了解有哪些单位可用,或者不同单位之间的差异。 首先,我需要回忆常见的CSS单位。绝对单位有px、pt、pc、in、cm、mm,相对单位有em、rem、%、ex、ch,还有视口单位vw、vh、vmin、vmax,以及较新的单位如lh、rlh,可能还有cap等。需要确认这些单位是否都适用在font-size上,尤其是较新的单位浏览器支持情况如何。 然后,用户可能的实际需求是什么?他们可能在开发网页时遇到字体大小在不同设备或浏览器上显示不一致的问题,或者想了解如何选择最合适的单位来实现响应式设计。比如使用rem来相对于根元素,或者使用视口单位来根据屏幕大小调整字体。也可能在调整字体大小时发现某些单位设置过小不生效,比如用px设置太小被浏览器限制,所以需要结合之前的回答中的最小问题来解释。 需要注意用户可能的背景知识。他们可能对CSS有一定了解,但想深入理解不同单位之间的区别和使用场景。要避免使用过于专业的术语,但又要准确说明每个单位的特点。比如解释em和rem的区别,或者视口单位的计算方式。 另外,是否需要提到浏览器的兼容性问题?比如较新的单位如lh或cap可能不被所有浏览器支持,需要提醒用户注意。或者在不同媒体(屏幕vs打印)下使用不同单位,比如pt常用于打印。 还要考虑用户可能遇到的常见错误,比如混淆em和rem,或者百分比单位相对于父元素的计算方式。举例说明不同单位的使用场景会有帮助,比如推荐在响应式设计中使用rem结合媒体查询,或者使用vw/vh实现流体排版。 最后,总结部分需要强调根据具体需求选择合适的单位,比如跨设备一致性、可访问性、响应式布局等。可能用户需要的是一个清晰的指南,帮助他们在实际项目中做出决策。在</think> CSS 中,`font-size` 属性的可以通过多种单位定义,不同单位会影响字体大小的计算方式和适应性。以下是常见单位及其特点: -- ### **1. 绝对单位** - **`px`(像素)** 基于屏幕像素的固定,不受父元素或屏幕尺寸影响。 示例:`font-size: 16px;`(直接指定像素大小)。 - **`pt`(磅,印刷单位)** 1pt = 1/72 英寸,常用于印刷媒体(如 PDF)。 示例:`font-size: 12pt;`(适合打印场景)。 - **`in`(英寸)、`cm`(厘米)、`mm`(毫米)** 物理尺寸单位,一般用于特殊打印需求,屏幕显示可能不精确。 示例:`font-size: 0.5cm;`。 --- ### **2. 相对单位** - **`em`** 相对于**父元素**的字体大小。 示例:若父元素 `font-size: 16px`,`1em = 16px`,`2em = 32px`。 ⚠️ 注意:多层嵌套时可能产生复合放大/缩小效果。 - **`rem`** 相对于**根元素(HTML)**的字体大小,更易控制全局比例。 示例:若 `html { font-size: 20px; }`,则 `1rem = 20px`。 - **`%`(百分比)** 与 `em` 类似,基于父元素字体大小的百分比。 示例:`font-size: 150%;`(父元素为 `16px` 时结果为 `24px`)。 --- ### **3. 视口单位(响应式布局常用)** - **`vw`(视口宽度百分比)** 1vw = 视口宽度的 1%。 示例:`font-size: 2vw;`(视口宽度 1000px 时字体为 20px)。 - **`vh`(视口高度百分比)** 1vh = 视口高度的 1%。 - **`vmin`、`vmax`** 分别取视口宽高较小(vmin)或较大(vmax)的百分比。 --- ### **4. 其他特殊单位** - **`ex`** 基于当前字体的字母 "x" 的高度(较少用)。 - **`ch`** 基于数字 "0" 的宽度,适合等宽字体排版。 - **`lh`、`rlh`** 基于当前行高(`lh`)或根元素行高(`rlh`),需注意浏览器兼容性。 --- ### **常用场景建议** - **跨设备一致性**:优先使用 `rem` + 媒体查询。 - **响应式文本**:结合 `vw` 或 `clamp()` 实现动态缩放(如 `clamp(1rem, 2vw, 1.5rem)`)。 - **可访问性**:避免纯 `px`,使用相对单位(`em`/`rem`)允许用户浏览器调整。 - **打印场景**:使用 `pt` 或 `cm` 确保物理尺寸准确。 --- ### **示例对比** ```css /* 固定像素 */ .font-px { font-size: 16px; } /* 相对根元素 */ .font-rem { font-size: 1rem; } /* 响应式视口单位 */ .font-vw { font-size: 2vw; } /* 复合响应式 */ .font-fluid { font-size: clamp(12px, 1.5vw + 10px, 20px); } ``` 根据需求选择合适的单位,可平衡设计灵活性和用户体验!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值