PC网页、移动端适配，页面font-size动态变化

ZDM_9999

已于 2023-05-25 17:47:24 修改

阅读量1.4k

点赞数 1

文章标签： java javascript html

于 2023-05-17 10:38:05 首次发布

本文链接：https://blog.csdn.net/ZDM_9999/article/details/130720272

版权

文章介绍了两种方法在网页开发中实现字体大小随屏幕尺寸变化的响应式设计。方法一是通过JavaScript动态计算并设置根元素的font-size，以适应PC和移动端不同屏幕。方法二是利用CSS3的calc()函数，根据视口宽度调整字体大小，确保跨设备的视觉一致性。

摘要由CSDN通过智能技术生成

方法一：

1. 首先，在页面引入"viewport"属性,这些属性可根据自己的需要修改

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

2. 在<head></head>标签里引入动态修改font-size的代码，此段需要优先加载，以免页面布局错乱

pc端：

第一种
(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      /*设置一个屏幕最大宽度临界值，当大于这个宽度时，字体也不放大了*/
      if(clientWidth>=1240){
          docEl.style.fontSize = '14px';
      }else{
          /*1920是设计稿的宽度，14是浏览器默认值14(px)*/
          docEl.style.fontSize = 14* (clientWidth / 1920) + 'px';
      }
    };
 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

第二种
(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 < 375? 375: rootHtml.clientWidth;
        rem = rootWidth * dpr / 3.75; // 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); //移动端
})();

方法二：

移动端开发中，为适应不同屏幕尺寸，需要字体根据屏幕大小改变而改变。

第一种（css解决）：

html{
	font-size: calc(100vw/36);   
	font-size: -webkit-calc(100vw/36);  
	font-size: -moz-calc(100vm/36);    
}

原理：让不同尺寸的屏幕有一个统一的单位来衡量。
csl()是一个函数function，calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的宽度。
vw：视口的最大宽度，1vw=视口宽度的百分之一；
vh：视口得最大高度，1vh=视口高度的百分之一；
vmin/vm：相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）。
-moz-代表火狐浏览器的内核
-webkit-代表谷歌浏览器的内核

第二种（js解决）：

<script>
    $(function(){
        function setRem(){
            var clientWidth=$(window).width();
            var nowRem=(clientWidth/360*10);
            $("html").css("font-size",parseInt(nowRem, 10)+"px");
        };
        setRem();
    });
</script>