问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何为不同移动设备设置html不同的font-size？

头像
cccrrr
    21754254

    图片描述

    如图，如何为不同的移动设备设置html不同的font-size，从而可以使用rem这个相对长度单位？

    javascripthtmlcss前端
    阅读 6.4k
    9 个回答
    得票最新
    头像
    Ivy_Lady
      308128

      @media 可以针对不同的屏幕尺寸设置不同的样式，结合rem单位一起使用

      @media screen and (max-width: 375px)
  html
    font-size 12px !important
@media screen and (min-width: 376px) and (max-width: 720px)
  html
    font-size 14px !important
      头像
      funkyLover
        2.2k136073

        只能通过js动态设置

        function setBaseFont () {
  var c = 320; // 基准宽度,取的是iphone5
  var a = 100;
  var b = document.getElementsByTagName('html')[0];
  var f = b.getBoundingClientRect().width / c;
  var d = f * a / 10;
  b.style.fontSize = d + 'px';
}
        头像
        笑场
          642714

          可以试试em
          为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
          em的尺寸单位由W3C建议。
          1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
          因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
          不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
          不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
          然后-------------------------------------------------------------------
          在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比
          例如
          body {font-size:100%;}
          h1 {font-size:2.5em;}
          h2 {font-size:1.875em;}
          p {font-size:0.875em;}
          在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
          我从runoob网站上看到的

          头像
          小蜗牛
            4.4k43356

            根据 html 标签中的 data-dpr =1 猜测 应该是用了 淘宝的 第三方库 根据 dpr来做 比例处理的

            头像
            我养了一窝汪汪
              9741517

              iPhone6的屏幕下1rem=50px

              或者用css
              html{font-size:calc(100vw / 7.5);}

              分割线
              抱歉，之前的那段js代码兼容性不是很好，包括那段css代码，只要在低版本的安卓手机上就会失效，找了很久找到一段代码分享一下，兼容性杠杠的

              (function(){
    var originWidthByDesign = 750 / 2;
    var originRootFontSize = 50;
    var maxLimitWidth = 667;
    var doc = document.documentElement;
    var div = document.createElement('div');
    div.setAttribute('style', 'font-size: 1rem');
    if (!!document.addEventListener && '1rem' === div.style.fontSize) {
      var reCalculate = function reCalculate() {
        var clientWidth = doc.clientWidth;
        if (!clientWidth) {
          return;
        }
        clientWidth = clientWidth < maxLimitWidth ? clientWidth : maxLimitWidth;
        doc.style.fontSize = originRootFontSize * clientWidth / originWidthByDesign + 'px';
        doc.style.display = 'none';
        doc.clientWidth;
        doc.style.display = '';
      };
      window.addEventListener('resize', reCalculate, false);
      document.addEventListener('DOMContentLoaded', reCalculate, false);
      reCalculate();
    }
    function getQueryString (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); return null;
    }
  })()
              头像
              东方胡
                232
                头像
                lordbaby
                  2
                  新手上路，请多包涵
                  头像
                  xiaopengji
                    6411719

                    用媒体查询；@media 可以针对不同的屏幕尺（320,480,640,750,）寸设置不同的样式，

                    头像
                    sfgg8799
                      1221017

                      目测你使用了 flexible

                      // 当dpr=1时，font-size为12px
div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}
// 当dpr=2时，font-size为24px
[data-dpr="2"] div {
    font-size: 24px;
}
// 当dpr=3时，font-size为24px
[data-dpr="3"] div {
    font-size: 36px;
}
// 1、2、3分别针对1倍、2倍、3倍使用。

                      前提是你自己的html中不能写

                      <meta name="viewport" content=""/>

                      使用 flexible

                      会自动通过js给你的html添加类似于这样的语句

                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题