为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html/CSS

在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调整整个项目尺寸。

点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
12
获赞与收藏
87

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消