继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

关于手机端字体设置的rem怎么定义

AiLeime
关注TA
已关注
手记 8
粉丝 12
获赞 87

在html中定义css字体单位标签的大小
css格式化文件reset.css中加入:

@media screen  and (max-width: 750px){
    html{font-size:30px;}
}
@media screen and (min-width:640px) and (max-width:749px){
    html{font-size:25px; }
}
@media screen and (min-width:480px) and (max-width:639px){
    html{font-size:20px; }
}
@media screen and (min-width:320px) and (max-width:479px){
    html{font-size:15px; }
}

根据不同尺寸的屏幕,去定义html级的单位字体大小,在PSD转换制作页面的时候,基本的手机端PSD的尺寸为750*1335,对照下来的尺寸也就是1rem=30px,在制作时掌握好计算尺寸就基本能解决这些问题了。
手机端的高度可以固定,宽度能用百分比来表示,就不要用rem去固定,必要的固定宽度的,就用rem固定,像一些按钮,基本都是用百分比去表示宽度的,像一些固定宽度的图标就用rem去固定。
在小一点的尺寸下字体换算比例可能会有所失衡,就更改一下reset.css中的media中的font-size大小,依照需求去改。
网上还有段代码是在js里头定义的字体大小的

<script>
    (function(){
      var _w = document.documentElement.clientWidth;//屏幕可视区域宽高w3c下全兼容
      var _h = document.documentElement.clientHeight;
              var _fontsize = (_w / 640) * 20;
              var style = document.createElement('style');
              style.type = 'text/css';
              style.innerHTML = 'html{font-size:' + _fontsize + 'px}';
              document.getElementsByTagName('head').item(0).appendChild(style);
                  })();
</script>

这段代码我用了一个项目,之后就没有再用了,很多高度问题因为比例的换算,到最后整个页面变形。后期问题太多,果断换了media调整整个项目尺寸。

打开App,阅读手记
7人推荐
发表评论
随时随地看视频慕课网APP

热门评论

你好,我想知道用JS去控制HTML的字体大小哪里不好?我看过凡科的H5还有小游戏都是用的JS去控制的

查看全部评论